Online JavaScript Thumbnail Scroller

Big Screen Scrollers — Example

View Example
Download Example

This is an example of changes that can be made to cause an image to be replace with the clicked image in the scroller rather than having it open a new window.

Several things need to be done:

  1. Add a javascript function doImageSwap that does the actual swap of the image.
  2. Add a div and image to the page, these are for styles and the image will be replaced with clicked image original. These can be placed anywhere on the page.
  3. Modify your generated "scroller_.js" file to call the function.

Double Scrollers — Code Example

See previous images See previous images
See next images See next images
See previous images See previous images
See next images See next images

You will have to manually edit the outputed code for the second scroller if you use the form to create them.

Download example of using double scrollers. (Right click-save as)

Scroller Code Example




<script type="text/javascript">
var isFlowers = new ImageScroller("isFlowersFrame", "isFlowersImageRow");

    isFlowers.addThumbnail("/images/imagescrollerone/flower_1_thmb.jpg", 
    "/images/imagescrollerone/flower_1_full.jpg", 
    "Screen Shot 1", 
    "Screen Shot 1 Description.");
    
    isFlowers.addThumbnail("/images/imagescrollerone/flower_2_thmb.jpg", 
    "/images/imagescrollerone/flower_2_full.jpg", 
    "Screen Shot 2", 
    "Screen Shot 2 Description.");
    
    isFlowers.addThumbnail("/images/imagescrollerone/flower_3_thmb.jpg", 
    "/images/imagescrollerone/flower_3_full.jpg", 
    "Screen Shot 3", 
    "Screen Shot 3 Description.");
    
    isFlowers.setThumbnailHeight(128);
    isFlowers.setThumbnailWidth(96);
    isFlowers.setThumbnailPadding(3);
    
    isFlowers.enableThumbBorder(false);
    isFlowers.setClickOpenType(1);
    isFlowers.setThumbsShown(1);
    
    isFlowers.renderScroller();
</script>