Simple Fade SlideShow Documentation

German-Note: Für Nutzer aus Deutschland gibt es hier eine deutschsprachige Dokumentation.

The jQuery Simple Fade SlideShow was made by Pascal Bajorat a web developer and designer based in Berlin, Germany.

Copyright (c) 2011 Pascal Bajorat
Dual licensed under the MIT and Gnu GPL version 3 licenses.

my code stock.com - Deine Code- & Snippet-Sammlung - immer und überall.

Documentation

Create the HTML strucure for Simple Fade SlideShow

You can use some of the following structure formats to create your slideshow:

This is the general markup:

<* id="slideshow">
    <*>Subelement</*>     
    <*>Subelement</*>  
</*>

Use Lists:

<ul id="slideshow">
    <li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow -->
    <li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
    <li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
</ul>

Use Div Tags:

<div id="slideshow">
    <div><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></div> <!-- This is the last image in the slideshow -->
    <div><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></div>
    <div><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></div>
    <div><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></div> <!-- This is the first image in the slideshow -->
</div>

Use Div and only images:

<div id="slideshow">
    <img src="images/4.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
    <img src="images/3.jpg" width="640" height="480" border="0" alt="" />
    <img src="images/2.jpg" width="640" height="480" border="0" alt="" />
    <img src="images/1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>

Start / bind the Simple Fade SlideShow to HTML elements

To start and bind the plugin to the HTML structure you habe created in the step bevor use this code:

jQuery(document).ready(function(){
    jQuery('#slideshow').fadeSlideShow();
});

This code will bind the slideshow to the HTML element with id #slideshow and start with default settings.

Options of Simple Fade SlideShow

The code below shows the default settings of Simple Fade SlideShow:

width: 640, // default width of the slideshow
height: 480, // default height of the slideshow
speed: 'slow', // default animation transition speed
interval: 3000, // default interval between image change
PlayPauseElement: 'fssPlayPause', // default css id for the play / pause element
PlayText: 'Play', // default play text
PauseText: 'Pause', // default pause text
NextElement: 'fssNext', // default id for next button
NextElementText: 'Next >', // default text for next button
PrevElement: 'fssPrev', // default id for prev button
PrevElementText: '< Prev', // default text for prev button
ListElement: 'fssList', // default id for image / content controll list
ListLi: 'fssLi', // default class for li's in the image / content controll 
ListLiActive: 'fssActive', // default class for active state in the controll list
addListToId: false, // add the controll list to special id in your code - default false
allowKeyboardCtrl: true, // allow keyboard controlls left / right / space
autoplay: true // autoplay the slideshow

Note: The elements: PlayPauseElement, NextElement, PrevElement and ListElement will be generate automated by the slideshow script if you don’t create this elements yourself. If you want to disable that elements change the option to false

my code stock.com - Deine Code- & Snippet-Sammlung - immer und überall.

How to change the options

You can change the default settings in the function call to fadeSlideShow as parameter.

This is an example for changing the width and height:

jQuery(document).ready(function(){
    jQuery('#slideshow').fadeSlideShow({
        width: 800,
        height: 600
    });
});

Styling with CSS

If you don’t have changed the default CSS id’s and/or classes in the options, then you can use the following defaults for styling:

#fssPrev // is the id of the previous button
#fssNext // is the id of the next button
#fssPlayPause // is the id of the play / pause button
#fssList // is the id of the control list
.fssLi(X) // class of the li inside #fssList - (X) is a counting number
.fssActive // this class marked the active li inside #fssList
Select your language

 

Documentation

Here you can find an extensive documentation for this jQuery Plugin: read, learn, use and have fun with Simple FadeSlideShow.


Download

Download jQuery Simple FadeSlideShow plugin and see how easy it is to use.