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!
Make yourself heard