a jQuery slideshow plugin

it's easy

The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis.

it's small

At 15kB for the full version, and a minute 6kB for the hyper-compressed version, and tidy code, this plugin won’t bog down your site
or burn out your users’ browsers, even using it in multiple iterations per page.

it's flexible

With the little markup you need to add to your site, you get a full featureset, like the ability to put whatever data you want within the slide window, even mixed types, a proportionally-correct status display that configures itself, fullscreen display and swipe functionality.

it's neat

Add some slick usability
to your site with a plugin that’s fun and easy to use. And if you have any other questions, I’ll be happy
to help you out.

download

the big boy

the mini

More readable
if you're human.

More readable
if you're Skynet.

getting going

1

Download the development or production version from my dedicated server.

do you jQuery?

2

Download jQuery if you don’t already have it.

we're rootin' for ya

3

Save these two files into a folder called ‘js’ in your website's root directory (the one that your homepage or index.html/php/asp file is situated in). It’s not really required that you put them into a directory called ‘js’, but it’s pretty standard practice.

just follow the script

4

On the website pages you would like this particular feature to appear, make sure you add the lines <script src="/js/jquery.js" type="text/javascript"></script> and <script src="/js/simpleSlide.js" type="text/javascript"></script>

See? Simple.

5

Now add one more line below those two. It should read: <script type="text/javascript">$(document).ready( function(){ simpleSlide(); });</script>

and consider yourself done with setup!

the html gist

/* Use this basic markup to set up your own slideshow

<div class="simpleSlide-window" rel="this_particular_slideshow">
    <div class="simpleSlide-tray" rel="this_particular_slideshow">
        <div class="simpleSlide-slide" rel="this_particular_slideshow">
            /* Images, tables, content, whatever you want may
             * go into these divs. But, the items contained
             * within the simpleSlide-slide classed elements
             * MUST have a fixed size, and each element that
             * is part of the slideshow should have the same
             * exact pixel dimensions. If the contained
             * elements are images, the plugin will figure out the dimensions.
             */
        </div>
    </div>
</div>

If you think about HTML hierarchy, then the way I've arranged this software should make some sense to you. Otherwise, try to follow my analogy.

You have objects: a large sheet of paper with a square area cut from it, a long strip of paper that has the same height as that hole, and individual squares of paper that are exactly the same size as that hole, and if you put them end-to-end, they would equal the distance of the strip of paper. What simpleSli.de does is cut out the hole, create the strip and animate it all. All you have to do is supply the little squares. If your web page is loaded with simpleSli.de set up, and it is called on document ready, its process is like this:

1. It first checks the available parameters set_speed, status_width, status_color_outside, status_color_inside and callback to see if any were passed. If not, it backfills those parameters to defaults, so using any of them is purely optional. We'll cover these variables and their affect on the plugin later.

2. It then waits for all of the images on the page to finish loading then gets down and dirty. First, it goes through each iteration of the plugin on the page and sets their main window (AKA, the large piece of paper with a hole cut in it). It does this by looking a few steps down the hierarchy and finding out what the first "slide"'s dimensions are. This is why having accurate dimensions is so very important. Because this program does so much on its own, you have to be vigilant on your part. Make sure you also wrap every slide element (be it picture or content-filled-div) with the simpleSlide-slide -classed div.

3. Oh, and how does it know which elements belong to which slideshow group? You may have noticed, but there is an attribute on each of those items called "rel". To this attribute I've assigned the duty of essentially "grouping" your different slideshows. Whether or not you have more than one simpleSli.de slideshow running on your page, you must at least include the rel (even if it has no apparent value in it). Thankfully, there are no restrictions on names, but try to stick to one-word names or numbers for simplicity's sake.

4. It sets the height and width of the "tray." This "tray" is what is "slid" when a button is pressed. It contains all of the "slides." (Think of a sort of slide projector, and the tray being the carousel.)

5. It then begins setting up your simpleSlideStatusBar. We'll go into that a little bit later, as well.

6. After setting up the status bar, simpleSli.de then assigns alt attributes to each slide, giving it a token "page." This number is accessible via the .jump-to element. You can see more about this in the "more uses" section.

Once everything is loaded, your viewing window will fade in. Now the show begins.