Scrolling Images Carousel With Hotlinks

for osCommerce Online Merchant v2.2

Ok basically this will allow you to add a bunch of scrolling/slider images to your header area, they scroll horizontally... I find on my site which is food service oriented it helps get the customer hungry so they will order food... Its highly customizable, you can add images, subtract images, add hyperlinks so when you click on an image you are taken to a specific page. The backround color can be changed, the scroll speed can be changed, and the image height and width as well as the scroller can be changed to fit your needs. Im sure you can even add this to a box if you wanted to. ok so to install open up your headers.php file located in catalog/includes after this bit of code around line 45 **************************** if ( (WARN_DOWNLOAD_DIRECTORY_NOT_READABLE == 'true') && (DOWNLOAD_ENABLED == 'true') ) { if (!is_dir(DIR_FS_DOWNLOAD)) { $messageStack->add('header', WARNING_DOWNLOAD_DIRECTORY_NON_EXISTENT, 'warning'); } } if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } ?> ************************************* Insert this (not including the asterisk's LOL) ************************************* <center><td align="center"><script type="text/javascript"> //Specify the slider's width (in pixels) var sliderwidth="760" //Specify the slider's height var sliderheight="75px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=2 //configure background color: slidebgcolor="#660000" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="/images/food/1.jpg" border=0 width="75" height="75"></a>' leftrightslide[1]='<a href="http://"><img src="/images/food/2.jpg" border=0 width="75" height="75"></a>' leftrightslide[2]='<a href="http://"><img src="/images/food/3.jpg" border=0 width="75" height="75"></a>' leftrightslide[3]='<a href="http://"><img src="/images/food/4.jpg" border=0 width="75" height="75"></a>' leftrightslide[4]='<a href="http://"><img src="/images/food/5.jpg" border=0 width="75" height="75"></a>' leftrightslide[5]='<a href="http://"><img src="/images/food/6.jpg" border=0 width="75" height="75"></a>' leftrightslide[6]='<a href="http://"><img src="/images/food/7.jpg" border=0 width="75" height="75"></a>' leftrightslide[7]='<a href="http://"><img src="/images/food/8.jpg" border=0 width="75" height="75"></a>' leftrightslide[8]='<a href="http://"><img src="/images/food/9.jpg" border=0 width="75" height="75"></a>' leftrightslide[9]='<a href="http://"><img src="/images/food/10.jpg" border=0 width="75" height="75"></a>' leftrightslide[10]='<a href="http://"><img src="/images/food/11.jpg" border=0 width="75" height="75"></a>' leftrightslide[11]='<a href="http://"><img src="/images/food/12.jpg" border=0 width="75" height="75"></a>' leftrightslide[12]='<a href="http://"><img src="/images/food/13.jpg" border=0 width="75" height="75"></a>' leftrightslide[13]='<a href="http://"><img src="/images/food/14.jpg" border=0 width="75" height="75"></a>' leftrightslide[14]='<a href="http://"><img src="/images/food/15.jpg" border=0 width="75" height="75"></a>' leftrightslide[15]='<a href="http://"><img src="/images/food/16.jpg" border=0 width="75" height="75"></a>' leftrightslide[16]='<a href="http://"><img src="/images/food/17.jpg" border=0 width="75" height="75"></a>' leftrightslide[17]='<a href="http://"><img src="/images/food/18.jpg" border=0 width="75" height="75"></a>' leftrightslide[18]='<a href="http://"><img src="/images/food/19.jpg" border=0 width="75" height="75"></a>' leftrightslide[19]='<a href="http://"><img src="/images/food/20.jpg" border=0 width="75" height="75"></a>' leftrightslide[20]='<a href="http://"><img src="/images/food/11.jpg" border=0 width="75" height="75"></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=0 ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script></td> ********************************************** after you have inserted that into your header.php file go ahead and edit the variables that specify where the images can be found. Also add your links, and edit the image sizes if you like, currently i have them set to 75 X 75 which was adequate for me although you may want bigger or smaller images. Also be sure to change the backround color to something you might find attractive, as well as any other variables found in the top part of the code. to check the script out in action please visit: Http://www.mrdeliveryman.com

Files