Slideshow

A slideshow using jQuery and JSON

Author: Stefan Hayden
Version: 0.1 (changelog)
Download: ST_Slideshow.zip
Licence: GPL 3.0

Contents

  1. Introduction
  2. Example
  3. Download
  4. Getting Started
  5. Configuration
  6. Changelog
  7. Credits

Introduction

Slideshow is a jQuery plugin for displaying images with optional captions. The images are loaded from a JSON array just before they are displayed to minimise loadtime. Other features include previous/next, play/pause, and page selection.

Example

Download

Slideshow.zip

Getting Started

You will first need to have jQuery on your page. Then unzip the plugin and then link to the files in your <head> tag. The css also points to a pause_play.png image that you should update the path as well.


<script src="http://www.google.com/jsapi"></script> 
<script>google.load("jquery", "1.3.2");</script> 
<script type="text/javascript" src="/path/to/lib/jquery.ST_Slideshow.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/css/ST_Slideshow.css" />

All slides but the first one is loaded with JSON. Add the first slide to the HTML with this code below. This ensures that atleast one image shows on pageload and also is where more slides will be added.


<ul id="HomepageSlideshow" class="ST_Slideshow">
    <li class="slide show">
        <a href="http://www.YourLinkHere.com/"><img src="http://YourImageHere.jpg" alt="Title Goes Here" /></a>
        <span >
            <div class="caption">Title Goes Here</div><div class="subcaption">Subtitle goes here</div>
        </span>
    </li>
</ul>

This is an exmple of the JSON array that is required to be passed to the plugin. URL and LINK are required but CAPTION and SUBCAPTION is optional.


var exampleSlides = [
    {
        url: 'http://farm4.static.flickr.com/3397/3533689468_5016e62628.jpg', 
        link: 'http://www.flickr.com/photos/library_of_congress/3533689468', 
        caption: 'Bathing Machines, Scheveningen (LOC)', 
        subcaption: 'The Library of Congress'
    },
    {
        url: 'http://farm4.static.flickr.com/3609/3533689872_f534a25f06.jpg', 
        link: 'http://www.flickr.com/photos/library_of_congress/3533689872', 
        caption: 'Cornell winning Fresh. race - 1913 (LOC)', 
        subcaption: 'The Library of Congress'
    },
    {
        url: 'http://farm3.static.flickr.com/2199/3532870139_acedfbb92a.jpg', 
        link: 'http://www.flickr.com/photos/library_of_congress/3532870139', 
        caption: 'SYLPH, U.S. (LOC)', 
        subcaption: 'The Library of Congress'
    },
];

Once that is ready you can start the plugin. Only the slideArray is required, but many other options are listed in the configuration section


$(document).ready(function () {
    $('#HomepageSlideshow').ST_Slideshow({
        slideArray: exampleSlides     
        });
});

Configuration

ST_Slideshow accepts a list of options to control the appearance and behaviour of the carousel. Here is the list of options you may set:

Property Type Default Description
timeOut mixed "slow" The speed of the scroll animation as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.
prev_next bool true turn previous/next interface on or off
play_pause bool true turn play/pause interface on or off
pagination bool true turn pagination interface on or off
SlideFade mixed "slow" The speed of the fade animation between slides as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.
CaptionAnimate mixed "slow" The speed of the slideDown animation of the caption as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.
CaptionAnimateDelay mixed 500 The length of the delay between showing a slide and animating up the caption as string in jQuery terms ("slow" or "fast") or milliseconds as integer (See jQuery Documentation). If set to 0, animation is turned off.

Changelog

Credits

ST_Slideshow was inspired by the s3slider slideshow.