Slide Show jQuery Plugin

Slide Show is a simple jQuery plugin to view larger versions of images on a web page. Click an image above to view start your viewing experience. The project was born from wanting to write my own image viewer for pictures I had from a show and the design was partially inspired by Firefox 11’s view image page.

Basic Example

The JavaScript looks like this:

    $('ul.slides').slideShow();

Which works for markup like this:

    <ul class="slides">
        <li>
            <a href="/media/img/cat-1.png">
                <img src="/media/img/cat-1-thumb.png" />
            </a>
        </li>
        …
    </ul>

Advanced Example

It defaults to looking for links and using their href attributes to find the images, but you can specify a custom selector and data attribute:

    $('ul.slides').slideShow('li', {dataAttr: 'src'});

Which works for markup like this:

    <ul class="slides">
        <li data-src="/media/img/cat-1.png">
            <img src="/media/img/cat-1-thumb.png" />
        </li>
        …
    </ul>

created by Peter Coles — ( github / twitter )