Slideshow Plugin

A jQuery slideshow plugin that looks for HTML5 figures.

by mlms13

HTML

<div id="slideshow">
    <figure>
        Slide 1
        <figcaption>The slideshow starts here, with slide 1.</figcaption>
    </figure>
    <figure>
        Slide 2
        <figcaption>But we could specify a random starting position if we wanted to.</figcaption>
    </figure>
    <figure>
        Slide 3
        <figcaption>Someday, it will even be possible to randomize the whole slide show.</figcaption>
    </figure>
</div>

CSS

body {
    font: 16px sans-serif;
    margin: 30px;
}
#slideshow {
    height: 350px;
    position: relative;
    width: 800px;
}
#slideshow figure {
    background: #1bf;
    background-image: -webkit-linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
    background-image: -moz-linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
    background-image: -ms-linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
    background-image: -o-linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
    background-image: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
    border: 1px solid #ddd;
    color: #fff;
    font: bold 36px / 280px sans-serif;
    height: 350px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 800px;
}
#slideshow figure:first-child {
    background-color: #f40;
}
#slideshow figure:last-child {
    background-color: #90c;
}
#slideshow figure figcaption {
    background: rgba(0,0,0,0.75);
    bottom: 0;
    color: #fff;
    font: normal 16px / 22px sans-serif;
    left: 0;
    padding: 24px 4%;
    position: absolute;
    text-align: left;
    width: 92%;
}

JavaScript

(function ($) {
    $.fn.conSlideshow = function (options) {
        var settings = $.extend({
            'firstSlide' : 0,
            'timer' : 5000
        }, options);

        return this.each(function () {
            var slides = $(this).children('figure'),
                current; // the slide that is currently visible

            function showSlide(slide) {
                slide.css({zIndex: 100});
                current.css({zIndex: 99});

                slide.fadeIn(800, function () {
                    current.hide();
                    current = slide;
                    queueNextSlide();
                });
            }

            function queueNextSlide() {
                var index = current.index(),
                    next = index + 1;

                next = (next >= slides.length) ? 0 : next;

                window.setTimeout(function () {
                    showSlide(slides.eq(next));
                }, settings.timer);
            }

            // Initialize the plugin
            (function () {
                slides.hide();
                current = slides.eq(settings.firstSlide);
                current.show();

                queueNextSlide();
            }());
        });
    };
}(jQuery));

$('#slideshow').conSlideshow({timer: 4000});