CSS Codes
CSS Layouts
FF1+ IE6+ Opr8+

Continuous Reel Slideshow

Author: Dynamic Drive

June 7th, 14: Updated to v1.1, which adds swipe navigation in mobile devices. Uses the TouchSwipe plugin (one new .js file).

Description: Continuous Reel Slideshow lets you showcase images in a reel like fashion, one image at a time and in an continuous manner, with no breaks between the first and last slide. The reel can be played from left to right (horizontally), or top down (vertically), and pauses onMouseover. You can implement controls to allow users to manually move the reel forward and backwards, instead of it playing automatically. With that brief introduction out of the way, here are the script's features:

  • Displays images one at a time with no breaks between the first and last slide (and visa versa).
  • Images within the reel can be of varying dimensions- the script will center each image accordingly within the display area. *
  • The reel can display the slides horizontally (left to right), or vertically (top down).
  • Slideshow can be set to automatically rotate the images (and optionally stopping after x cycles), or via manual "back" and "forth" controls you define.
  • Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
  • Slideshow automatically pauses onMouseover.
  • Swipe navigation in touch devices New in v1.1

This reel is looking good!

Note: This script now replaces the two defunct scripts Up-down Image Slideshow Script and Left-right Image Slideshow Script.

Demos (swipe in touch devices to navigate):

≤ back forth ≥
  • Horizontal orientation.
  • Automatic sliding every 2.5 seconds, stopping after 2 complete cycles.
  • Persist of last viewed slide enabled.
  
  • Vertical orientation.
  • Manual display mode.
  • Showcases images of differing dimensions.






Directions Developer's View

Add the below code inside the <HEAD> section of the page:

Select All

The above code references two external files, which you should download (right click, and select "Save As"):

Step 2: Then, insert the following sample HTML for the slideshow in the BODY section of your page:

Select All

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

<div id="firstreel"></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 Reel Slideshow on the page.

Available settings for new reelslideshow()

Each instance of a Continuous Reel Slideshow is created by calling new reelslideshow() in the HEAD section of your page:

var uniquevariable=new reelslideshow(options)

Where "uniquevariable" should be an arbitrary but unique variable (for each instance of Reel Slideshow), and options is an object literal containing the desired settings. For example:

var firstreel=new reelslideshow({
 wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
 dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["image1.jpg"], //["image_path", "optional_link", "optional_target"]
  ["image1.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
  ["image1.jpg"],
  ["image1.jpg"] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
 orientation: "h", //Valid values: "h" or "v"
 persist: true, //remember last viewed slide and recall within same session?
 slideduration: 300 //transition duration (milliseconds)
})

Here's an explanation of each setting:

options Description
wrapperid

Required

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

<div id="myreel"></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. Smaller images will be centered within the display area. *

*Vertical centering of each image does not work in IE6/7, only in IE8+ and all other modern browsers.
imagearray

Required

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

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

The optional link and corresponding link target parameters can be left out entirely if not in use:

imagearray: [
 ["../dynamicindex4/fruits.jpg"],
 ["../dynamicindex4/pool.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
 ["../dynamicindex4/autumn.jpg"],
 ["../dynamicindex4/dog.jpg"] //<--no trailing comma after very last image element!
],

Notice how there should be no comma trailing the very last element! The images do NOT have to be of the same dimensions- images smaller than the display area are centered, while those larger will be partially clipped. *

*Vertical centering of each image does not work in IE6/7, only in IE8+ and all other modern browsers.
displaymode

defaults to {type:'auto', pause:2000, cycles:2, pauseonmouseover:true}

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

{type:'auto', pause:2000, cycles:2, pauseonmouseover:true}

The "type" option should be set to either "auto" or "manual", for automatic or manual rotation, respectively. In manual mode, you must define your own "back" and "forth" controls to let the user control the slideshow. See "togglerid" option below for more info.

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 "pausemouseover" option when set to true will cause the slideshow to pause when the mouse rolls over it in automatic mode.
orientation

Defaults to "h"

 Set to either "h" or "v" to cause the slideshow to scroll the slides from left to right (horizontally), or up down (vertically) instead.
persist

Defaults to true

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

Defaults to 500

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

Creating "back" and "forth" links for your Reel Slideshow

Whether your slideshow is set to automatically rotate or manually, you can easily add "back" and "forth" navigation buttons to explicitly move the slideshow in either direction. Simply call the two variants of the method scriptinstance.navigate(dir):

  • scriptinstance.navigate('back'): When called moves the referenced reel slideshow backwards by one slide.

  • scriptinstance.navigate('forth'): When called moves the referenced reel slideshow forward by one slide.

scriptinstance should be the name of the variable assigned to your Reel Slideshow when invoking it, such as:

var myreel=new reelslideshow({
 wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
 dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["image1.jpg"], //["image_path", "optional_link", "optional_target"]
  ["image1.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
  ["image1.jpg"],
  ["image1.jpg"] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
 orientation: "h", //Valid values: "h" or "v"
 persist: true, //remember last viewed slide and recall within same session?
 slideduration: 300 //transition duration (milliseconds)
})

Here's an example of "back" and "forth" navigation buttons for the above slideshow:

<a href="javascript:myreel.navigate('back')" style="margin-right:200px;">back</a>
<a href="javascript:myreel.navigate('forth')">forth</a>

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