Translucent slideshow Script
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:
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.
- Vertical sliding.
- Images of varying dimensions used, with slideshow set to dimensions of largest image.
- Manual display mode.
- Showcases images of differing dimensions.
Add the below code inside the <HEAD> section of the page:
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
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: [ 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 " The " The " |
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>