How to make a product slideshow for your website's homepage using javascript

2007-10-05

Make 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

bogdan

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 17:10:39
mook

I 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.

Next time mr. script maker, make sure it works in more than one browser...

Posted on 2008-08-13 15:30:38
Per

First of all great work.

I 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....

Posted on 2008-10-19 19:34:20
jay

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.

Please 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>

Posted on 2009-06-07 01:02:35
jay

please add the following to fix that 2px issue.

#banners div img{
display:block;
}


I made it work 100%.

Feel free to post any questions. I'll be happy to answers them.

Posted on 2009-06-07 01:16:08
Ezra

Hello,
Thanks 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

Posted on 2009-12-06 21:21:08
Sara

Hi -- Have these changes been incorporated in the downloadable files?

Thanks!

Posted on 2009-12-29 15:31:04
Matt

Looks great but i have 2 questions:

1) 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

Posted on 2010-09-19 19:01:56
nikai

Hi,
Thanks 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

Posted on 2010-12-01 13:18:13
nick

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
Please help

Posted on 2010-12-03 12:47:46
Omar

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
Thank you

Posted on 2011-01-18 05:00:01
rocky

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 07:54:16
Betzaida

How 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?
Please help!

Posted on 2011-07-18 17:05:01
Anita Currier

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 19:59:56
Don Lamson

Can you tell me how to change the rotation rate? I would like the pictures to rotate more slowly.

Thanks!

Posted on 2012-06-12 06:41:05
Erica Smith

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?
<a href="http://setemfreedallas.com/wp/our-services">felony bail bonds</a>

Posted on 2012-12-30 19:12:16

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu