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+ IE6+ Opr8+

Translucent slideshow Script

Author: Dynamic Drive

Note: Script completely rewritten Jan 12th, 2011

Description: Don't just display images, showcase them in style using this sleek image slideshow script! Images are animated in horizontally or vertically , with a translucent effect applied during the process. Each image can be independently hyperlinked and with its own link target. Very cool, very practical!

  • Images within the slideshow can be of varying dimensions- the script will center each image accordingly within the display area. *
  • The images can be set to slide in horizontally (left to right), or vertically (top down) instead.
  • Slideshow can be set to automatically rotate the images (and optionally stopping after x cycles), or manually.
  • Define manual controls that either cycle the slideshow sequentially back and forth, or jump to a specific slide directly.
  • Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
  • Slideshow automatically pauses onMouseover.

Demos:

back forth
Or go to a particular slide:
1st slide | 2nd slide | 3rd slide |4th slide
  • Horizontal sliding.
  • Images of varying dimensions used, with slideshow set to dimensions of smallest image.
  • Automatic sliding every 2.5 seconds, stopping after 2 complete cycles.
  • Persist of last viewed slide enabled.
  
back forth
  • Vertical sliding.
  • Images of varying dimensions used, with slideshow set to dimensions of largest image.
  • 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 the external file "translucentslideshow.js", which you should download (right click, and select "Save As").

Step 2: Then, insert the following sample HTML for

Select All

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

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

Available settings for new translideshow()

Each instance of a Translucent Slideshow is created by calling new translideshow() in the HEAD section of your page:

var uniquevariable=new translideshow(options)

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

var translideshow1=new translideshow({
 wrapperid: "myslideshow", //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 Translucent Slideshow. Such a DIV on the page may look like this:

<div id="myslideshow"></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 navigation links for your Translucent 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 sequentially by one slide, or go to a particular slide directly. Simply call the public method:

scriptinstance.navigate(keyword)

Where "keyword" should be either the keyword "back", "forth", or an integer (where 0 designates the 1st slide, 1=2nd slide etc):

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

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

  • scriptinstance.navigate(0): When called moves the slideshow to show the very 1st slide

  • scriptinstance.navigate(2): When called moves the slideshow to show the 3rd slide

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

var translideshow1=new translideshow({
 wrapperid: "myslideshow", //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:translideshow1.navigate('back')" style="margin-right:200px;">back</a>
<a href="javascript:translideshow1.navigate('forth')">forth</a>