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