Codeassembly - How to make a product slideshow for your website's homepage using javascript http://www.codeassembly.com/feed/comments/25 CodeAssembly - Simplicity is prerequisite for reliability - Comments en-us contact@codeassembly.com contact@codeassembly.com RSS Feed Generator Sara Hi -- Have these changes been incorporated in the downloadable files? Thanks! http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#279 2009-12-29 08:31:04 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#279 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#277 2009-12-06 14:21:08 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#277 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. http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#238 2009-06-06 18:16:08 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#238 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 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); } 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#237 2009-06-06 18:02:35 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#237 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.... http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#170 2008-10-19 12:34:20 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#170 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... http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#151 2008-08-13 08:30:38 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#151 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? http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#143 2008-07-26 10:10:39 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#143