Submit FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Website TemplatesSnappyfile
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark Ultimate Fade-in slideshow (v2.0) online:
FF1+ IE6+ Opr9+

Ultimate Fade-in slideshow (v2.4)

  Author: Dynamic Drive

Note: May 24nd, 10': Adds new "peekaboo" description option, where descriptions are shown automatically in an animated fashion. Also adds "oninit" and "onslide" event handlers to enhance customization of the slideshow.

Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here's a lowdown on the script's features:

  • Sleek fade in effect that has the current image fading over the previous one.
  • Ability to display images either as an automatic or manual slideshow. In manual mode you define your own "prev/next" controls to let the user go through the slides.
  • In automatic mode, slideshow can be set to stop rotating after x cycles.
  • Each slide can be optionally hyperlinked.
  • Each slide can have an optional description associated with it. Descriptions can either be set to show on demand (when the mouse rolls over the slide), or be always visible until explicitly dismissed.
  • Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
  • Slideshow automatically pauses onMouseover.

Rock on with the ultimate fade in slideshow script!

Demos:

-Straightforward, auto playing slideshow with no hyperlinking, descriptions etc.

 

  
Lets help ensure there will always be places like this for future generations.

-Auto playing slideshow with descriptions shown automatically using the "peekaboo" option.
I wish I could be a dog sometimes!

-Auto playing slideshow with some slides hyperlinked and carrying a description, shown onmouseover.

  
A nice day to get the skates out and go ice skating.
1/4

-Manual slideshow with custom buttons, persistent description panel, and current image index/ total images info shown.

Directions Developer's View

Simply add the below code inside the <HEAD> section of the page:

Select All

The above code references 1 external file plus 3 images as part of its interface. Download them below (right click, and select "Save As"):

  • fadeslideshow.js
  • (check inside fadeslideshow.js to ensure that the paths to these 3 images are correct)

Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:

Select All

Mark up wise each Slideshow should just be an empty DIV on the page with a unique ID:

<div id="fadeshow1"></div>

The DIV's ID value should match up with the value set in the option wrapperid in the code of Step 1 above. When the page loads, the script will load the gallery into this DIV.

That's it for installation! Time to take a look at all the available options at your disposal when initializing each instance of Fade In Slideshow on the page.

Available Options for new fadeSlideShow()

Each instance of a Fade In Slideshow is created by calling new fadeSlideShow() in the HEAD section of your page:

var uniquevariable=new fadeSlideShow(options)

Where "uniquevariable" should be an arbitrary but unique variable (for each instance of Fade In Slideshow), and options is an object literal containing the desired options. Here's an explanation of each option:

options Description
wrapperid

Required

 The ID of an empty DIV container on your page that will show the Fade In Slideshow. Such a DIV on the page may look like this:

<div id="fadeshow1"></div>
dimensions

Required

 The dimensions of the slideshow in the format [width_int, height_int] with pixels being the assumed unit. These two values should be set to the dimensions of the largest image. Any image within the slideshow with width or height that exceeds the specified values will be clipped partially.
imagearray

Required

 An array containing the images you wish to show. Each array element contains 4 parts:

["path_to_image", "optional_url", "optional_linktarget", "optional_description"]

Enter a blank string ("") for the optional parts you do not wish to define. Here's a complete example:

imagearray: [
 ["pool.jpg"],
 ["http://mysite.com/cave.jpg", "http://cnn.com"],
 ["fruits.jpg", "http://cnn.com", "_new"],
 ["dog.jpg", "", "", "This image has a description but no hyperlink"] //<--no trailing comma after very last image element!
],

Notice how there should be no comma trailing the very last element!
displaymode

Required

 Sets the primary attributes of your slideshow, from whether this is an automatic or manual slideshow, the pause between slides, to the number of cycles before the slideshow stops in automatic mode. The syntax is:

displaymode: {type:'auto|manual', pause:milliseconds, cycles:0|integer, wraparound:true|false, randomize:true|false},

The "cycles" option when set to 0 will cause the slideshow to rotate perpetually in automatic mode, while any number larger than 0 means it will stop after x cycles.

The "warparound" option when set to false will disable the user's ability in manual mode to go past the very first and last slide when clicking on the navigation links to manually view the slides.

The "randomize" option when set to true will shuffle the display order of the images, so they appear in a different order each time the page is loaded.

In the following, the slideshow will auto run and stop after 3 complete cycles. Each time the page is reloaded, the order of the images randomly changes:

displaymode: {type:'auto', pause:3000, cycles:3, wraparound:true, randomize:true},

In the following, the slideshow will be put in manual mode, with the ability to loop back to the beginning of the slideshow disabled:

displaymode: {type:'manual', pause:2000, cycles:0, wraparound:false},

In manual mode, you must define your own "prev" and "next" controls to let the user control the slideshow. See "togglerid" option below for more info.
persist

Defaults to false

 Boolean variable that decides whether the slideshow should remember and recall the last viewed slide within a browser session when the page is reloaded.
fadeduration

Defaults to 500

 The duration of the fade effect when transitioning from one image to the next, in milliseconds.
descreveal

Defaults to "ondemand"

 For a slideshow in which at least one image has a description associated with it, this option dictates the style of the Description Panel. The four possible values are:
  1. "ondemand": Reveals the description when the user mouses over the slideshow, then hides it again when the mouse moves out.
  2. "always": Shows a persistent description panel at the foot of the slideshow that can be dismissed by clicking on the "x" icon.
  3. "peekaboo": (v2.4 feature). Reveals the description for each image automatically by sliding it in view each time, then hiding it again before the next image is shown. This setting is similar to "always" above, except the description isn't always visible, allowing viewers to see each image in its entirety momentarily.
  4. "none": Explicitly disables the descriptions from showing. While not defining a description for any of your images inside the initialization code has a similar effect, this option is useful when you wish to define descriptions, but just not show them using one of the methods above, but rather, in combo with the onslide() event handler for example.
togglerid

Defaults to ""

 Use this option if you wish to create navigational controls that allow the user to explicitly move back and forth between slides, whether the slideshow is in "auto" or "manual" mode. Set "togglerid" to the ID of another DIV on your page that will house the navigation controls for the slideshow, ie:

togglerid: "slideshowtoggler"

The DIV on the page with the corresponding ID attribute will be parsed by the script for links carrying a certain CSS class.

Creating the navigation links for a manual slideshow

If you wish to create navigational controls that allow the user to explicitly move back and forth between slides, you need to manually define a DIV and create links inside it to act as "Prev" and "Next" buttons. Such a DIV looks like this:

<div id="slideshowtoggler">
<a href="#" class="prev"><img src="left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="right.png" style="border-width:0" /></a>
</div>

The ID attribute of this DIV (ie: "slideshowtoggler") should correspond to the value set inside the togglerid option of fadeSlideShow(options). Then, inside this DIV, simply create the desired links with one of the following two CSS class names to give it special meaning:

  • prev: A link with this CSS class moves back the shown content by 1.

  • next: A link with this CSS class moves forward the shown content by 1.

You can also display a status control anywhere inside this DIV showing the current slide being shown relative to the others (ie: 3/5) using a SPAN with the CSS class:

  • status: A SPAN with this CSS class will be emptied and used by the script to display the current slide's order.

With that in mind, which links to show, how they are arranged, and how they are styled are all up to you.

Notice about doctype and IE

Note that the CSS used to style this script assumes that your page contains a valid doctype at the very top in order to display properly. This is especially true in IE. HTML 5 advocates the use of the very simple valid doctype:

<!DOCTYPE HTML>

at the top of your page's source.

Table Of Contents