CSS Codes
CSS Layouts
FF1+ IE6+ Opr9+

Ultimate Fade-in slideshow (v2.6.1)

 Author: Dynamic Drive

Note: March 7th, 16': Updated to v2.6.1 for miscellaneous bug fixes.

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.
  • Responsive design- slideshow dimensions can now be set in percentage values to scale along with user's browser or mobile device screen size. New in v2.6
  • 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.
  • Supports swipe to navigate in both desktop and touch enabled devices. New in v2.6
  • Supports the "oninit" and "onslide" event handlers to enhance customization of the slideshow.

Rock on with the ultimate fade in slideshow script!

Demos (in touch enabled devices, swipe left/right to navigate as well):

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

 

  
  • Auto playing slideshow with descriptions shown automatically using the "peekaboo" option.
  • Responsive slideshow dimensions:  90% by 400px

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

  
  • Manual slideshow with custom buttons, persistent description panel, and current image index/ total images info shown.
  • Responsive slideshow and image dimensions. Slideshow set to 50% by 300px. Images set to 100% of container dimension via CSS.

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"):

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.

You can also set the dimensions to percentage values instead (wrap the values in quotations) to indicate you wish the slideshow to scale relative to its container. This sets the basis for a responsive slideshow, whereby the slideshow grows and shrinks based on the user's browser or mobile screen size.

The following shows some possible dimension values:

dimensions: [300, 200], // 300px by 200px

dimensions: ['90%', '80%'] // 90% by 80% of parent container size

dimensions: ['80%', 200] // 80% of parent container size by 200px

Also See: Guide to Responsive Ultimate Fade In Slideshow.
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.

Swiping to navigate the slideshow (v2.6 feature)

If you want to enable swiping left or right to navigate the slideshow (in both automatic and manual slideshow), you don't need to do anything. That's right. Simply make sure the reference to jquery.touchSwipe.min.js is there in the HEAD section of your page:

<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

And obviously make sure that this file is uploaded to your web server per the path to it specified above.

If for some reason you don't want swipe-to-navigate enabled, simply remove the above file reference in the HEAD section of your page.

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post