Ultimate Fade-in slideshow (v2.6.1)
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 some slides hyperlinked and carrying a description, shown onmouseover. |
|
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
- jquery.touchSwipe.min.js (v1.6.6) (Github) (Optional file to auto enable swipe navigation).
- (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.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 |
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: [ 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 " The " The " 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 " |
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:
|
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.