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
Legend: 
Download
Report
Nice contribution, works well thank you to
ihatedeskjets
padaben
azer
Richard Lindsey
For the upadates.
All credit to the author
Harlod Gross
For the contribution.
I found it a bit much all the time with the scrolling images, so i turned them off and it made the site look small!!
So i changed the code, that when the settings are set to "0" an images is shown in its place with a link.
I have set this one up to link to products_new.php and the image is one i made.
You can set the link to where ever you want and use any image you want.
If your confused by the packages below use this 1, I fixed a few things to make it work, instructions are in the rtf file open it with wordpad.
you can see it working at my test store www.fishguardferry.co.uk
same than before, but it's possible to link the sql_request from the box or module needed with the scrolling.
juste change the $products_query with yours.
enjoy
http://forums.oscommerce.com/index.php?showtopic=239816
(the file given here is a junk see other post)
I like this contribution :) Also, since I have some extra features in my own store that aren't in stock, I ripped out a few things before I uploaded the past 2 versions, but I didn't bother to test them... This time I did, and I caught one bug that got fixed... Also, I added an admin console option for turning this feature on and off, and setting the maximum of how many products you want to display in the scrolling header bar... Have fun! This is a complete package, and also has a proper set of instructions this time...
Whoops, couple of tiny logic errors, also, could someone find a way to make the damn valign work on this thing so shorter images are centered vertically? :D Use this attachment instead of the one below...
I've left the bulk of this contribution intact, but provided some prettier formatting of the text, adding a new line in the header section for the scrollbar to be placed in (for those of us that have a logo and whatnot as well as wanting this bar), and made the following changes:
Added semicolons to every single javascript line, this wasn't included in the original readout, at least what I copied and pasted from the web page (instead of downloading the actual attachment)...
Added the union query from Chemo's Union Product Listing in order to grab product data from the current category and all subcategories, then randomized the order and limited the query to 20 results (feel free to alter to your own value)... This scrollbar can now dynamically insert whatever images are in your categories, instead of holding a static list of images and urls for all pages...
Rewrote it so it uses a tep_href_link instead of a static http assignment for the link, so it will work with SEO url's...
Included a snippet of a thumbnailer that I use, in order to find the right ratio of width/height in the images when they're shrunken to a default of SMALL_IMAGE_WIDTH and SMALL_IMAGE_HEIGHT, and that way it can keep track of the total width of all of the images... this way, if you have a bottom-level category that only has 2 or 3 products in it, the sliderwidth will be adjusted to a shorter width value and won't look weird...
Added the product's name as the alt text on each image, and made sure i added slashes to compensate for apostrophes within the echo'd javascript...
Simply copy and paste the entire code segment you find in the attachment into your includes/header.php file, right above this section:
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tr class="headerNavigation">
<td class="headerNavigation"> <?php echo $breadcrumb->trail(' » '); ?></td>
Enjoy!
You can see this version in action at my store, http://www.allthingschildren.com
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
Add file to this package