DanielCassman

jQuery SimpleSlideshow

Description

jQuery SimpleSlideshow is an attractive yet compact jQuery plugin for displaying an image slideshow. SimpleSildeshow emphasizes compatibility and small file size—it requires no images or stylesheets, in fact it requires no files apart from the javascript file itself. Though it sacrifices some of the more advanced features of plugins like my jQuery Slideshow plugin, it makes up for that in compatibility with legacy browsers like IE6.

Download

You can download this project securely from Box.net for free.

Setup

To get started with jQuery Slideshow, you need to add two scripts to your webpage: jQuery and Slideshow. You can add jQuery in a number of ways; my favorite (shown below) is to use the version hosted at Google Code. You can also download jQuery for yourself or find another hosted version at jQuery's website. Download the slideshow zip file, and unzip it. You'll find some javascript files and a sample HTML file. Add script tags to include jQuery and the SimpleSlideshow script. Your script tags should look something like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-slideshow.min.js"></script>

Once you've gotten your scripts set up, you need to make sure your HTML is set up for SimnpleSlideshow. SimpleSlideshow expects your images to be thumbnail-sized <img> tags wrapped in <a> tags that link to the full-sized images. Your HTML should look something like this:

<div id="slideshow-wrapper">
 <a href="path to full-size image"><img src="path to thumbnail image" alt="image caption" data-color="color for background"/></a>
 <a href="path to full-size image"><img src="path to thumbnail image" alt="image caption" data-color="color for background"/></a>
 … Repeat for each image in the gallery
</div>

After the HTML is set up, you're all ready to launch your SimpleSlideshow. Add one more script at the bottom of your page, something like this:

<script type="text/javascript">
$(document).ready(function() {
 $('#slideshow-wrapper').simpleSlideShow();
});

Options

You can configure your SimpleSlideshow by passing it a single parameter—a javascript object of the following form. If you don't specify an option, it takes on the default value indicated below:

animate: false,
overlay: {
 background: '#000',
 opacity: 0.85
},
caption: {
 color: '#FFF'
},
slideshow: {
 interval: 4000,
 controls_color: '#FFF',
 controls_inactive_color: '#666'
},
extension: {
 CURRENT_IMAGE:-1,
 VERTICAL_RESERVED_SPACE:80,
 HORIZONTAL_RESERVED_SPACE:20,
 CONTROL_SET_SIZE:50,
 BACKUP_SCROLL_BEHAVIOR: 'auto'
}

Here is the specific documentation for each of the options:

  • animate: [true or false]: Tells Slideshow whether to animate the overlay and image transitions
  • overlay
    • overlay.background [color]: The overlay background color. Can be any color CSS recognizes
    • overlay.opacity [0 - 1]: Opacity of the overlay behind the slideshow (0 is full transparency, 1 is full opacity)
  • caption
    • caption.color [color]" The color of the caption text
  • slideshow
    • slideshow.interval [time in miliseconds]: The time between images when playing the slideshow
    • slideshow.controls_color [color]: A css color indicating the color that the previous, next, and close buttons should be when the user mouses over them
    • slideshow.controls_inactive_color [color]: A css color indicating the color that the previous, next, and close buttons should be when they are inactive

Do not pass any parameters for the extension section unless you know what you're doing.