How to make a product slideshow for your website's homepage using javascript
2007-10-05Make a nice product slideshow for your website to expose your featured products better, using javascript.
I will start by showing the product slideshow. I don't have any products to sell, so I used it for something else :)
Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction.
Imagination is more important than knowledge.
Gravitation is not responsible for people falling in love.
I want to know God's thoughts; the rest are details.
You can set your own change interval. Also when you place your mouse over one banner the banners don't change. When you move your mouse outside, then it starts to change the slides again
This is the html code
<div id="banners"> <div id="banner1"> <img src="banner1.jpg"> <span>Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction.</span> </div> <div id="banner2"> <img src="banner2.jpg"> <span>Imagination is more important than knowledge.</span> </div> <div id="banner3"> <img src="banner3.jpg"> <span>Gravitation is not responsible for people falling in love.</span> </div> <div id="banner4"> <img src="banner4.jpg"> <span>I want to know God's thoughts; the rest are details.</span> </div> <ul> <li><a href="/1/">1</a></li> <li><a href="/2/">2</a></li> <li><a href="/3/">3</a></li> <li><a href="/4/">4</a></li> </ul> </div> <script>bannertime = 1000;banner_init();</script>
And now, the css style. Fell free to modify it to suit your needs
body
{
/*ie needs this*/
margin:0px;
padding:0px;
/*set global font settings*/
font-size:10px;
font-family:Tahoma,Verdana,Arial;
}
#banners
{
width:500px;
height:275px;
border:2px solid #cccccc;
}
#banners div
{
width:500px;
height:250px;
display:none;
margin:0px;
}
#banners #banner1
{
display:block;
}
#banners div span
{
width:350px;
position:relative;
display:block;
top:-150px;
line-height:1.5em;
left:10px;
background:#fff;
font-size:1.2em;
padding:5px;
opacity:0.7;//standard
filter:alpha(opacity=50);//internet explorer
-moz-opacity:.50;//older firefox versions
}
#banners ul
{
width:auto;
height:25px;
background:#0063DC;
margin:0px;
}
#banners ul li
{
display:inline;
width:10px;
}
#banners ul li a
{
text-decoration:none;
padding:5px;
line-height:2.5em;
margin:5px;
color:#fff;
height:25px;
font-weight:bold;
}
#banners ul li a:hover
{
background:#fff;
color:#0063DC;
}
And finally, the javascript code
var current_banner = 1;
var total_banners = 0;
var wait = 0;
function banner_init()
{
//stop banner change if mouse over one banner
elements = document.getElementById('banners').getElementsByTagName('div');
total_banners = elements.length;
for (var i = 0; i < elements.length; i++)
{
elements[i].onmouseover = function ()
{
clearTimeout(wait);
}
elements[i].onmouseout = function ()
{
clearTimeout(wait);
wait = setTimeout('nextBanner()',bannertime);
}
}
//set navigation
elements = document.getElementById('banners').getElementsByTagName('ul')[0].getElementsByTagName('li');
total_banners = elements.length;
for (var i = 0; i < elements.length; i++)
{
elements[i].title = i + 1;
elements[i].onmouseover = function ()
{
banner(this.title);
clearTimeout(wait);
}
elements[i].onmouseout = function ()
{
clearTimeout(wait);
wait = setTimeout('nextBanner()',bannertime);
}
}
wait = setTimeout('nextBanner()',bannertime);
}
function banner(nr)
{
clearTimeout(wait);
elements = document.getElementById('banners').getElementsByTagName('div');
//hide all divs
for (var i = 0; i < elements.length; i++)
{
if (nr == (i + 1))
{
//show selected banner
elements[i].style.display = "block";
} else
{ //hide everything else
elements[i].style.display = "none";
}
}
wait = setTimeout('nextBanner()',bannertime);
}
function nextBanner()
{
if(current_banner < total_banners)
{
current_banner ++;
}
else
{ current_banner = 1;
}
banner(current_banner);
}
And a sample on how to pull your data from a database using php
The php code
<?php
//this is a simple example on how you can pull your data from the database to generate the product slideshow
$link = mysqli_connect('localhost','root','');
mysqli_select_db($link,'mydatabase');
?>
<div id="banners">
<?php
$slides = 0;//slide counter
//get all rows
$query = mysqli_query($link,'SELECT * FROM product_slideshow');
while ( $row = mysqli_fetch_assoc($query) )
{
$slides++;
?>
<div id="banner1">
<img src="banner<?php echo $slides?>.jpg">
<span><?php echo description;?></span>
</div>
<?php
}
//generate links and numbering
for ($i =0; $i < $slides;$i++)
{
?>
<li><a href="/products/myproduct-<?php echo $i?>.html"><?php echo $i?></a></li>
<?php
}
?>
</div>
<script>bannertime = 2000;banner_init();</script>
"product_slideshow" is a simple table with one row "description"
You can download all files for this example from here
Quotes from to here
Share this with the world
Related
Comments
Hi. It's a great nifty little script that I've implemented in a website, but one bug I can't find a way around concerns its behaviour in Internet Explorer. In both IE7 and 6 the text div loses its transparency, while in IE6 there's a gap between the banner pictures and the link bar. Any way how that could be fixed?
Posted on 2008-07-26 10:10:39I was able to get rid of the gap in IE6 by adding a disply:block to each image... transparency will probably never work in IE.
Posted on 2008-08-13 08:30:38Next time mr. script maker, make sure it works in more than one browser...
First of all great work.
Posted on 2008-10-19 12:34:20I have however been struggling to find a straightforward way to implement multiple instances of this script on the same page, for eg by passing two variables from the navigation buttons to the banner function: banner(nr,instance). Could you give me a hint how to make this work?
I could loop the entire script in PHP for every instance and rename the functions for each - but it seems extremely inefficient....
Okie i spent some time on this and got it working. I have fixed some of the errors form the original script. I tried to fix the space between images and navigation, however i still have 2px space showing up in ie. In my case i am hiding the <span> for SEO purposes. GOOD luck and if you find the way to fix 2px problem please please email me at jaydhaliwal atttt gmail.com thank you.
Posted on 2009-06-06 18:02:35Please fix the css according to your needs.
1. SQL
2. Javascript
3. CSS
4. PHP
1. SQL
CREATE TABLE IF NOT EXISTS `product_slide_show` (
`ID` int(11) NOT NULL AUTO_INCREMENT,
`Name` varchar(150) DEFAULT NULL,
`Anchor_Text` varchar(120) DEFAULT NULL,
`Image` varchar(250) DEFAULT NULL,
`Message` longtext,
`URL` varchar(250) DEFAULT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
2. Javascript
var current_banner = 1;
var total_banners = 0;
var wait = 0;
function banner_init()
{
//stop banner change if mouse over one banner
elements = document.getElementById('banners').getElementsByTagName('div');
total_banners = elements.length;
for (var i = 0; i < elements.length; i++)
{
elements[i].onmouseover = function (){
clearTimeout(wait);
}
elements[i].onmouseout = function (){
clearTimeout(wait);
wait = setTimeout('nextBanner()',bannertime);
}
}
//set navigation
elements = document.getElementById('banners').getElementsByTagName('ul')[0].getElementsByTagName('li');
total_banners = elements.length;
for (var i = 0; i < elements.length; i++)
{
elements[i].title = i + 1;
elements[i].onmouseover = function ()
{
banner(this.title);
clearTimeout(wait);
}
elements[i].onmouseout = function ()
{
clearTimeout(wait);
wait = setTimeout('nextBanner()',bannertime);
}
}
wait = setTimeout('nextBanner()',bannertime);
}
function banner(nr)
{
clearTimeout(wait);
elements = document.getElementById('banners').getElementsByTagName('div');
li = document.getElementById('banners').getElementsByTagName('ul')[0].getElementsByTagName('li');
//hide all divs
for (var i = 0; i < elements.length; i++)
{
if (nr == (i + 1))
{
//show selected banner
elements[i].style.display = "block";
li[i].style.background = "#c4c4c4";
} else
{ //hide everything else
elements[i].style.display = "none";
li[i].style.background = "none";
}
}
wait = setTimeout('nextBanner()',bannertime);
}
function nextBanner()
{
if(current_banner < total_banners) {
current_banner ++;
}else{ current_banner = 1;
}
banner(current_banner);
}
</script>
3. CSS
#banners
{
width:450px;
}
* html #banners div{
margin:0px;
}
#banners div{
width: auto;
height: auto;
display:none;
margin:0px;
}
#banners #banner1{
display:block;
}
#banner div a:hover{
cursor:hand;
text-decoration:none;
}
#banners ul{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0px;
float:left;
}
#banners ul li{
display: inline;
float: left;
background: url(../images/v_divider.gif) no-repeat scroll right top;
margin:0 !important;
}
#banners ul li a{
float: left;
font-weight:bold;
text-decoration: none;
margin:0 !important;
color: white;
padding: 2px 35px;
}
#banners ul li a:hover{
color:#fff;
}
#banners div span
{
width:350px;
position:absolute;
float:left;
top:-150px;
line-height:1.5em;
left:10px;
color:black;
border:5px solid red;
background:#fff;
font-size:1.2em;
padding:5px;
opacity:0.7;//standard
filter:alpha(opacity=50);//internet explorer
-moz-opacity:.50;//older firefox versions
}
#banner div img{
border: 0px;
display:block;
}
4. PHP
<div id="banners">
<?
//get all rows
$connection = connect_db();
$query = 'SELECT * FROM product_slide_show';
$result = mysql_query($query);
$rows = array();
while($row = mysql_fetch_assoc($result))
$rows[] = $row;
close_connect_db($connection);
for ($i =0; $i < sizeof($rows);$i++){
$url = '';
$msg = '';
$img = '';
$url = $rows[$i]['URL'];
$msg = $rows[$i]['Message'];
$img = $rows[$i]['Image'];
if($msg != '' && $url != '' && $img != ''){?>
<div id="banner<?echo $i+1;?>" class="banner_divs">
<a href="/<?echo $url;?>">
<img src="./images/slide_show/<?echo $img;?>" ></a>
<span><?echo $msg;?></span>
</div>
<?
}
}?>
<ul>
<?for ($i =0; $i < sizeof($rows);$i++){
$url = '';
$msg = '';
$url = $rows[$i]['URL'];
$msg = $rows[$i]['Message'];
$achor = $rows[$i]['Anchor_Text'];
if($msg != '' && $url != '' && $img != ''){?>
<li><a href="/<? echo $url;?>"><?php echo $achor;?></a></li>
<?}
}?>
</ul>
</div>
<script>bannertime = 2000;banner_init();</script>
please add the following to fix that 2px issue.
Posted on 2009-06-06 18:16:08#banners div img{
display:block;
}
I made it work 100%.
Feel free to post any questions. I'll be happy to answers them.
Hello,
Posted on 2009-12-06 14:21:08Thanks for this code, it's great, I have always wondered how to do this without using flash! One problem I am having though, is setting the changer intervals. I would like each slide to show for at least 5 seconds, but I am having trouble making that happen. I tried changing the javascript code in the beginning: var current_banner = 1;
var total_banners = 0;
var wait = 0;
I tried changing these three values, but it doesn't seem to make a difference. Any help would be much appreciated.
Thanks,
Ezra
Hi -- Have these changes been incorporated in the downloadable files?
Posted on 2009-12-29 08:31:04Thanks!
Looks great but i have 2 questions:
Posted on 2010-09-19 12:01:561) How can i get rid of the automatic slideshow. I just want the user to click through the content.
2) How can i make the transition between slides fade (or any other type of transition)?
Thanks
Hi,
Posted on 2010-12-01 06:18:13Thanks for this code, it's perfect, I have looked exactlly for this! Just I've got a question - how to make that the number in the navigation bar to change automatically it's colour when the current banner appears? (No1 to change it's colour when banner1 appears, No2 when banner2 appears....)
Thanks
I tryed to put in 1 html page 2 javascript files 1. the above and 2. random banner code and placed the 2nd after the 1st but the 1st stoped to work? Why? If I place the 2nd at first place everything is OK and the both codes work
Posted on 2010-12-03 05:47:46Please help
Ive been trying for weeks to add this slide show to my website but I cant because I have no idea what to copy first and the second and the third and the last one. Please I need some help to add this slide show to my website
Posted on 2011-01-17 22:00:01Thank you
how can i use it in html website.i mean where this code is used in head,body etc.i try it but nthng works for me.plz tell me the solution.
Posted on 2011-06-26 00:54:16How do I take the block off the bottom of the slideshow? What code needs to come off in order to take that off and just use the images?
Posted on 2011-07-18 10:05:01Please help!
I would like to have slides of my products running across the top of the home page of my wedding website: www.shopbestweddingsite.com. Could any of you assist me with that? Which code above would I use? How would I get it onto the home page of my wedding website? I naturally would need to upload the images I would like to use. Could any of you send the specific steps to me as to how I would do this? Please send those specific steps in writing to shopbestweddingsite@yahoo.com. Thanks so much.Sincerely,Anita Currier, CEO/Founder/Owner of www.shopbestweddingsite.com
Posted on 2011-09-10 12:59:56Can you tell me how to change the rotation rate? I would like the pictures to rotate more slowly.
Posted on 2012-06-11 23:41:05Thanks!
I want the visitors of my website to click on each slide and it will pop up a new window containing the detailed information.Sir please can you tell me how can i do that?
Posted on 2012-12-30 12:12:16<a href="http://setemfreedallas.com/wp/our-services">felony bail bonds</a>
Make yourself heard