An advanced and fantastic-looking photo slideshow for the jQuery javascript library. Use it to display images in a functional and attractive interface on a web page. Slideshow is compatible with all modern browsers, but does not support IE6. Its compelling features include interactive thumbnail previews, vertical and horizontal layouts, and faded colored backgrounds.
You can download this project securely from Box.net for free.
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, a CSS stylesheet, and a folder called 'img' with several PNG images. Put the files in your website folder, keeping the directory structure unless you want to change it (if you do, make sure you amend the following instructions accordings. 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>
Next you need to add the stylesheet. Add this to the <head> section of your page:
<link rel="stylesheet" type="text/css" href="css/jquery-slideshow.css"/>
Once you've gotten your scripts and the stylesheet set up, you need to make sure your HTML is set up for Slideshow. Slideshow 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 Slideshow. Add one more script at the bottom of your page, something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow-wrapper').slideShow();
});
To see Slideshow in action, check out my photo gallery.
You can configure your Slideshow 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,
border: '5px solid #FFF'
},
images: {
next: 'img/_slideshow-next.png',
previous: 'img/_slideshow-prev.png',
close: 'img/_slideshow-close.png'
},
extension: {
IMAGES_IN_NAVBAR: -1,
NAVBAR_EDGE_OFFSET: 4,
BACKUP_SCROLL_BEHAVIOR: 'auto'
}
Here is the specific documentation for each of the options:
Do not pass any parameters for the extension section unless you know what you're doing.
You may specify whether Slideshow should set up horizontally or vertically. The default horizontal layout has the controls and play button along the bottom of the screen, with images above. The vertical setup has the controls and preview bar along the left edge of the screen, with the play button on the left. To change the layout to vertical, simply add the class "vertical" to your <body> tag: <body class="vertical">. That will tell both the CSS file and the javascript to set the layout vertically.