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 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#385 2011-09-10 12:59:56 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#385 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! http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#377 2011-07-18 10:05:01 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#377 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. http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#373 2011-06-26 00:54:16 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#373 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#365 2011-01-17 22:00:01 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#365 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#352 2010-12-03 05:47:46 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#352 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#351 2010-12-01 06:18:13 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#351 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 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#345 2010-09-19 12:01:56 http://codeassembly.com/How-to-make-a-product-slideshow-for-your-website's-homepage-using-javascript/#345 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