Download and unzip these two files and add them to the marquee folder.
crawler.js marquee.js
Round up all your images and make them the desired size. Mine are 120 wide by 80 tall. Now add a folder to VSD named marquee then add all your images to it. I renamed all of my images to image1.jpg and image2.jpg and so on for this example. You can name your images what ever you like just change the code below to reflect the actual name of you images.
Scrolling picture marquee
Back to Progrower.coffeecup.com
<div class="marquee" id="mycrawler">
<img src="marquee/image1.jpg" alt="" title="" />
<img src="marquee/image2.jpg" alt="" title="" />
<img src="marquee/image3.jpg" alt="" title="" />
<img src="marquee/image4.jpg" alt="" title="" />
<img src="marquee/image5.jpg" alt="" title="" />
<img src="marquee/image6.jpg" alt="" title="" />
<img src="marquee/image7.jpg" alt="" title="" />
<img src="marquee/image8.jpg" alt="" title="" />
<img src="marquee/image9.jpg" alt="" title="" />
<img src="marquee/image10.jpg" alt="" title="" />
<img src="marquee/image11.jpg" alt="" title="" />
<img src="marquee/image12.jpg" alt="" title="" />
<img src="marquee/image13.jpg" alt="" title="" />
<img src="marquee/image14.jpg" alt="" title="" />
<img src="marquee/image15.jpg" alt="" title="" />
<img src="marquee/image16.jpg" alt="" title="" />
<img src="marquee/image17.jpg" alt="" title="" />
<img src="marquee/image18.jpg" alt="" title="" />
<img src="marquee/image19.jpg" alt="" title="" />
<img src="marquee/image20.jpg" alt="" title="" />
<img src="marquee/image21.jpg" alt="" title="" />
<img src="marquee/image22.jpg" alt="" title="" />
<img src="marquee/image23.jpg" alt="" title="" />
<img src="marquee/image24.jpg" alt="" title="" />
<a href="http://coffeecup.com" target="_blank" title="Coffeecup Software"><img src="marquee/image25.jpg" alt="" title="" /></a>
</div>
Add a HTML box to your page and paste this code to the Body HTML Keep the box open for the next step
<script type="text/javascript" src="marquee/crawler.js">
</script>
<script type="text/javascript" src="marquee/marquee.js">
</script>
Add this code the the Header HTML of the HTML box above
If your images are a different size then 80 x 120 then you have to adjust the marquee.js file to make the marquee match you image size and the width of you html box. Open the marquee.js file in notepad or any html editor and make the adjustments as pointed out below.
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'margin-top': '2px',
'padding': '1px',
'width': '900px',
'height': '80px'
},
inc: 0, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
//]]>
This should be the same as the height of your images.
This should be the same as the width of your HTML box.
The last image is linked as an example.