jQuery Slideshows

by Chris Marsh

This is my take on the Simple jQuery Slideshow by Jon Raasch and borrowing ideas posted by Ronan Berder. This version allows for most html elements to be used as slides. You can use images <img>, paragraphs <p>, div's <div> and links <a> etc. It's also very easy to create multiple slideshow's on one page.

A benefit of being able to use div's as slides, makes it very easy to place an image within a div container along with a caption. This allows you to place image captions in your markup and style it with css without the need for any additional javascript. The bonus of this caption method ensures your first slide & caption are visible even when javascript is disabled.

Slideshow 1 with various slide styles

img
Image Caption

Div's

Some custom content

img

A plain unstyled paragraph used as a slide.

img
Image Caption
img

Slideshow 2 with image slides

img img img img img

Examples Of Basic Image Slideshows

Simple example pages:

The Html


            <div id="myShow-1" class="slide-show">
                <img class="slide first" src="pic1.jpg" width="115" height="115">
                <img class="slide" src="pic2.jpg" width="115" height="115">
                <img class="slide" src="pic3.jpg" width="115" height="115">
            </div>
            <div id="myShow-2" class="slide-show">
                <img class="slide first" src="pic4.jpg" width="115" height="115">
                <img class="slide" src="pic5.jpg" width="115" height="115">
                <img class="slide" src="pic6.jpg" width="115" height="115">
            </div>

The CSS


            #myShow-1, #myShow-2 {
                height:115px;
                width: 115px;
                margin: 10px
            }
            .slide-show {
                position: relative
            }
            .slide-show .slide {
                display: none;
                position:absolute
            }
            .slide-show .slide.first, .slide img {
                display: block
            }

The Javascript


            function slideSwitch(target) {
                var current = $(target + ' .slide:eq(0)');
                var next = $(target + ' .slide:eq(1)');
                $(target).append(current);
                next.fadeIn(1100);
                current.fadeOut(1100);
            }
            $(function() {
                setInterval("slideSwitch('#myShow-1')", 3000 );
                setInterval("slideSwitch('#myShow-2')", 3000 );
            });

Examples For Adding Captions

Simple example pages with captions:

The Html


            <div id="myShow-1" class="slide-show">
                <div class="slide first">
                    <img src="pic1.jpg" width="115" height="115">
                    <div class="slide-caption">Image 3</div>
                </div>
                <div class="slide">
                    <img src="pic2.jpg" width="115" height="115">
                    <div class="slide-caption">Image 1</div>
                </div>
                <div class="slide">
                    <img src="pic3.jpg" width="115" height="115">
                    <div class="slide-caption">Image 2</div>
                </div>
            </div>

Additional CSS To Style The Caption


            .slide .slide-caption {
                width: 100%;
                color: white;
                text-align:center;
                background-color: black;
                position: absolute;
                bottom:0;
                -moz-opacity:0.6;
                -khtml-opacity: 0.6;
                opacity: 0.6;
                filter:alpha(opacity=60)
            }

Example Of Custom Content

Simple example page with custom content:

Chris Marsh 6th August 2009
Last Updated: 7th August 2009