I have created a slideshow for displaying rotating images for a client and they are happy enough with it. However, they would like to be able to have multiple instances of the slide show on one page (for forums or something I guess) and this is a little beyond me at the moment as I never took the time learn object programming (yes yes, I know!). I would be forever in your debt if you could help me out here. Below is the code as I have it now. Regards, Paul Whitrow ---------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script type="text/javaScript"> <!-- // create and load image array slideShowTitle = 'Human Anatomical Details'; var imgArray=new Array(); imgArray[0] = new Image(); imgArray[0].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/59469498.jpg'; imgArray[0].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=0'; imgArray[0].alt = 'Picture of male torso'; imgArray[1] = new Image(); imgArray[1].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/4400891.jpg'; imgArray[1].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=1'; imgArray[1].alt = 'Picture of nervous system'; imgArray[2] = new Image(); imgArray[2].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/89276983.jpg'; imgArray[2].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=2'; imgArray[2].alt = 'Picture of Lower Arm and Pelvis Bones'; imgArray[3] = new Image(); imgArray[3].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/1.jpg'; imgArray[3].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=3'; imgArray[3].alt = 'Picture of Lower Arm and Pelvis Musculature'; imgArray[4] = new Image(); imgArray[4].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/86150337.jpg'; imgArray[4].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=4'; imgArray[4].alt = 'Picture of Lower Arm and Pelvis Nervous System'; imgArray[5] = new Image(); imgArray[5].src = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/images/thumbs/3921139.jpg'; imgArray[5].lnk = 'http://www.gr0w.com/amos/growgallery/human_anatomical_details/?slideNum=5'; imgArray[5].alt = 'Picture of Spinal Column Bones'; // user variables var sliderWidth=300; // user variables // DO NOT EDIT BELOW THIS LINE! var imgSpace=1; var sliderHeight=50; var imageHeight=sliderHeight; var t; var x=0; var w=0; var imgstr=''; var LBT,LBH,LB,SH,SC; var opera=false; var moz=false; var ie=false; if ((navigator.userAgent).indexOf("Opera")!=-1) opera=true; if (navigator.appName=="Netscape") moz=true; if ((navigator.appName).indexOf("Microsoft")!=-1) ie=true; function getObj(cls){ var grp = document.getElementsByTagName('div'); for(a=0; a < grp.length; a++){ if(grp[a].className){ if(grp[a].className == cls){ return grp[a]; } } } } function loading(){ LBT = getObj('loadbartext'); LBH = getObj('loadbarholder'); LB = getObj('loadbar'); SH = getObj('scrollholder'); SC = getObj('scrollcontent'); y = imgArray.length; if(x < y){ LBT.innerHTML='Loading image '+(x+1)+' of '+y; if(moz || opera){ if(imgArray[x].width > 0){ w += imgArray[x].width; x += 1; } }else if(ie){ if(imgArray[x].complete){ w += imgArray[x].width; x += 1; } } LB.style.width = Math.round(LBH.offsetWidth / y) * x; t=setTimeout("loading()",100); }else{ clearTimeout(t); w += (imgArray.length * imgSpace); loaded(); } } function loaded(){ getObj('loader').style.display = 'none'; SC.style.width = w; SC.style.display = 'block'; SC.style.left = sliderWidth; scroll(); } function scroll(){ SC.style.left = (SC.offsetLeft)-1; if((SC.offsetLeft) <= -((SC.offsetWidth)-sliderWidth)){ SC.innerHTML = imgstr + imgstr } if((SC.offsetLeft) == -w){ SC.style.left = 0 } //window.status=SC.offsetLeft+":"+(-w) t=setTimeout("scroll()",20); } function stopscroll(){ clearTimeout(t); } for(a=0; a < imgArray.length; a++){ imgstr+='<a href="'+imgArray[a].lnk+'"><img src="'+imgArray[a].src+'" alt="'+imgArray[a].alt+'" border="0" \/><\/a>'; } var str=''; str+='<style type="text\/css">'; str+='.container{border:1px solid #ccc;width:'+sliderWidth+'px;background-color:#eee;}'; str+='.box{border-top:1px solid #fff;border-bottom:1px solid #fff;width:'+sliderWidth+'px;}'; str+='.scrollholder{position:relative;height:'+sliderHeight+'px; width:'+sliderWidth+'px;background-color:#fafafa;overflow:hidden;}'; str+='.scrollcontent{position:relative; white-space:nowrap; display:none;}'; str+='.scrollcontent img{ height:'+imageHeight+'px; margin-right:'+imgSpace+'px;}'; str+='.loader{position:relative;display:block;margin-top:10px;text-align:center;font:600 7pt verdana,sans-serif;color:#666;text-align:center;}'; str+='.loadbarholder{margin:0 auto;height:10px; width:130px; background-color:#eee; margin-top:3px;text-align:left;}'; str+='.loadbar{height:10px; background-color:#ccc;}'; str+='.slidetitle{font-family:verdana;font-size:8pt;line-height:1.4em;margin:0 2px;color:#666;text-transform:uppercase;letter-spacing:-1px;}'; str+='.slidetext{text-align:right;font-family:verdana;font-size:7pt;line-height:1.5em;margin:0 2px;color:#999;}'; str+='.slidetext a{color:#777;}'; str+='<\/style>'; str+='<div class="container">'; str+='<div class="slidetitle">'+slideShowTitle+'<\/div>'; str+='<div class="box">'; str+='<div class="scrollholder">'; str+='<div class="loader">'; str+='<div class="loadbartext"><\/div>'; str+='<div class="loadbarholder">'; str+='<div class="loadbar"><\/div>'; str+='<\/div>'; str+='<\/div>'; str+='<div class="scrollcontent" onmouseover="stopscroll()" onmouseout="scroll()">'; str+=imgstr; str+='<\/div>'; str+='<\/div>'; str+='<\/div>'; str+='<div class="slidetext"><a href="http://slide.gr0w.com">Slide</a> by <a href="http://www.gr0w.com" title="Visit The Grow Collective">Grow Collective</a><\/div>'; str+='<\/div>'; document.write(str); loading(); //--> </script> </body> </html>
i)Do they mean multiple instances of the slide show on the one page (doesnt make sense) or ii)multiple different pictures on the same page with a slide show running and the picture in focus is the largest one eg. fashion slideshow
easiest way to do this is to create a page with a slideshow in it then create another page with x number of iframes each iframe pointing to the slideshow page. This aint a very elegant design but it will meet there needs!