news slider
5 posters
Page 1 of 1
news slider
please help me could some one set me up with a news slide show like the one on this website http://uk.ign.com/ i have no idea about this kind of stuff so if someone set it up for me i would be so greatfull thanks
Re: news slider
Hi,
For that one.
Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page
Change the pictures links.
Add this to your homepage and insert he adres of your HTML page in it.
For that one.
Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page
- Code:
<html>
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
width:600px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:-45px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}</style>
</head>
<body>
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
<img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
Change the pictures links.
Add this to your homepage and insert he adres of your HTML page in it.
- Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
where is the hompage i add the last code?Nera. wrote:Hi,
For that one.
Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page
- Code:
<html>
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
width:600px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:-45px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}</style>
</head>
<body>
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
<img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
Change the pictures links.
Add this to your homepage and insert he adres of your HTML page in it.
- Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>
OMGitsDMC- Forumember
- Posts : 166
Reputation : 0
Language : english
Re: news slider
Admin panel >> Display >> Generalities >> Homepage Message
Add the adress in the code. Make sure that the script in HTML on the bottom stays the same.
Add the adress in the code. Make sure that the script in HTML on the bottom stays the same.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
That code is going to add a bunch of uneeded stuff since it has the </body> and stuff... which means that it wont make your forum show.
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: news slider
Here Drogba -link removed
Last edited by Nera. on July 3rd 2011, 12:45 am; edited 1 time in total (Reason for editing : -link removed)
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
Weird it did work. Nevermind then, but I think it would still be easier to remove everything but the raw code
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: news slider
Nera. wrote:Hi,
For that one.
Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page
- Code:
<html>
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
width:600px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:-45px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}</style>
</head>
<body>
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
<img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
Change the pictures links.
Add this to your homepage and insert he adres of your HTML page in it.
- Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>
Hi i did everything you said and it dont work ;/
Re: news slider
This also?Nera. wrote: Make sure that the script in HTML on the bottom stays the same.
Last edited by Nera. on July 3rd 2011, 3:49 pm; edited 1 time in total (Reason for editing : -link removed)
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
it is
- Code:
<html>
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
width:600px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:-45px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}</style>
</head>
<body>
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="http://www.carpictures.com/media/images/640/11FSE000531947AA.jpeg" alt="" />
<a href="http://dev7studios.com"><img src="http://www.carpictures.com/media/images/full/11FTA125124891AA.jpeg" alt="" title="This is an example of a caption" /></a>
<img src="http://www.modifiedcars.com/pix/cars_large/38284_242617.jpg" alt="" />
<img src="http://www.modifiedcars.com/pix/cars_large/36397_242023.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
Re: news slider
All that have sent me PM's have the same change in the script.
Make sure this stays the same. It gets deformed sometimes after saving it, than it wont work. As it did for you Shawn.
Make sure this stays the same. It gets deformed sometimes after saving it, than it wont work. As it did for you Shawn.
- Code:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
yeah and i have done everything now, And it still does not work! Is there not a diffarnt slide i can use like ign.com or fastcar.co.uk ??
Re: news slider
Shawn can you explain your problem a bit http://modifiedrides.7forum.info/
As I see it works, though you need to customize it bit to fit. I'll check it latter.
As I see it works, though you need to customize it bit to fit. I'll check it latter.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
yeah my problem is that there are scroll bars around it and that it's a iframe wich it the easy way, I wanted a real slide show,
Re: news slider
Find the one you want and will install it, OK?
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
There are bunch online. Just google a bit and find the one you like/want
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: news slider
I do want this one but change the blue to red http://www.fastcar.co.uk/ and put my own logo on
Re: news slider
http://htmldrive.net/categorys/show/2/Slideshow-Scroller
I can't really help you set it up since that isn't really a Forumotion support issue. They have clear instructions on each, you just need to have patience to install it.
I can't really help you set it up since that isn't really a Forumotion support issue. They have clear instructions on each, you just need to have patience to install it.
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: news slider
Hi i have no idea on how to do this, is there know one on here that can build slide shows ? there must be someone ?
Similar topics
» Need help getting code for News slider on the homepage
» Portal News Post & most recent news post
» WoW slider
» WOW Slider - help
» slider
» Portal News Post & most recent news post
» WoW slider
» WOW Slider - help
» slider
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum