Simpleshow jQuery Plugin

Demos

• Demo: Basic Image Slideshow
• Demo: Div slideshow with Pause/Play Buttons
• Demo: Div slideshow with Full API controls - Play, Resume, Next, Previous, Slide Pagination NEW

Download

Download Page

Please see the change log for version history. We recommend you always use the latest version.

Usage

XHTML

Simpleshow will make a slideshow out of ANY immediate children elements of a container element. This means you can mix up the slides however you want, but for a basic of images you can use the following code:

1
2
3
4
5
6

<div id="simpleshow">
    <img src="images/b1.jpg" alt="image 1" />
    <img src="images/b2.jpg" alt="image 2" />
    <img src="images/b3.jpg" alt="image 3" />
    <img src="images/b4.jpg" alt="image 4" />
</div>

CSS

Update: Simpleshow was updated to add most of the required CSS automatically.

Simpleshow works by absolutely positioning all the children elements, and then relatively positioning the container element. The minimal CSS required for the above XHTML slideshow:

1
2
3
4
5
6
7
8
9
10
11

#simpleshow {
    position:relative; /* not required as of 0.1.3 to allow non-js degrading */
    height:120px; /* a height is required */
    width: 254px; /* a width is required */
}
 
#simpleshow img {
    position:absolute; /* not required as of 0.1.3 to allow non-js degrading  */
    top:0; /* not required as of 0.1.3 to allow non-js degrading */
    left:0; /* not required as of 0.1.3 to allow non-js degrading */
}

Javascript

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

You then need to include the Simpleshow javascript file.

1

<script src="js/jquery.simpleshow-0.1.1.min.js"></script>

To setup the slideshow, you should include the minimum code like so

1
2
3
4
5

<script type="text/javascript">
        $(document).ready(function(){
                $("#simpleshow").simpleshow().start();
        });
</script>

Configuration

The optional parameters along with their default values

Developers API

Simpleshow has a powerful yet easy to use API to allow jQuery developers to perform cool things. We've kept added functionality, such as scrolling through slides with 'next' and 'previous' buttons, or to specific nubered slides, separate in this API so keep simpleshow as flexible as possible. See a demo here. Simply call these methods on a simpleshow object like so:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
        $(document).ready(function(){
                // get access to the object API
                var api = $("#simpleshow").simpleshow();
                // now start the slideshow as normal
                api.start();
                
                // .... now you can call any of the API methods on the api object.
        });
</script>

All available methods are outlined below

Changelog

V 0.2.0 Finished the API. Now the slideshow can be fully controlled using the next(), prev() and goTo(index) methods. Added a new demo to showcase it. next, prev and goTo will pause the slideshow, and then resume it when they have finished their operation.

V 0.1.4 Ok, NOW it's working correctly in IE. Changed the way the fading is accomplieshed. Also, removed the need to specify the 'childType' with some better jQuery selector code.

V 0.1.3 Added some of the CSS changes needed into the javascript plugin, meaning if JS is disabled then the user will be able to see ALL the content panels, imgs etc. within the slideshow. If you'd like to just show the first, add 'overflow: hidden' to the CSS of the container element.

V 0.1.2 Added support for IE's filter: alpha(opacity=100) property as well as using opacity:1.0

V 0.1.1 Added ability to pause and resume the slideshow. Also opened up a small API to build onto

V 0.1.0 Plugin created. Automatically cycles through images or any immediate children of a container element. Uses a fade effect.