New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Drop-in Slideshow Script

Author: Dynamic Drive

Note: Script rewritten March 9th, 07

Description: This is your regular image slideshow, except each image is "dropped" into view! A classic effect that works in all major browsers. The slideshow stops rotating when the mouse is over it, and you can initiate multiple drop-in slideshows on the same page. Drop your images like they're hot!

Demo:

Directions Developer's View

Step 1: Add the following SCRIPT to the <head> section of your page:

Select All

The code references an external .js file, which you should download below:

Step 2: Add the below sample code to the BODY of your page where you wish the slideshow to appear. It shows how to define your own images before creating a drop-in slideshow instance using them:

Select All

As you can see, the code to call to create a slideshow is:

//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 200, 250, 3000)

A word of caution- the values 200 and 250 refer to the desired dimensions of the slideshow, not any particular image, and should be large enough to accommodate the largest image within your slideshow both width and height wise. Otherwise, certain images may be clipped.