DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
|
|
Note: Oct 6th, 09': Adds option to randomize display order of
images, via new option
displaymode.randomize
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.
|
|
-Auto playing
slideshow with all slides showing a persistent description. |
-Auto playing
slideshow with some slides hyperlinked and carrying a description, shown
onmouseover. |
|
-Manual slideshow with custom buttons
and status control. |
Directions
Simply add the below code inside the <HEAD> section of the
page:
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:
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. |
persistDefaults 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. |
fadedurationDefaults to
500 |
The duration of the fade effect when
transitioning from one image to the next, in milliseconds. |
descrevealDefaults 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 two choices are "ondemand" and "always".
The former reveals the description when the user mouses over the
slideshow, while the later shows a persistent description panel at the
foot of the slideshow. |
toggleridDefaults
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:
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:
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.
|
Image Effects 
