Creative Juices Bo. Co.

A Simple Cross-Fade Slideshow Plug-In for JQuery

JQuery Plug-In: Simple Slideshow v2.0

I know, I know. There's about a gazillion slideshow plug-ins for JQuery. Trust me, I've seen em, I've used them and I've been impressed by them. But at times, the websites I'm working on, call for a simple little slideshow. That's all, nothing fancy. Just somethings that dissolves images, maybe some basic captioning and perhaps a little option to center the images or not.

A few years back, I made a little script that does just this. It was simple, had a small footprint and it did its job fairly well. The drawback was that it only allowed me to place one slideshow on a page at a time. So today I decided to re-write it and I figured while I was at it, convert it into a JQuery plug-in as well.

So let me introduce my Simple JQuery Slideshow. It has a few features you can control as well as the ability to pause a slide when a user mouseover's the cotainer. To use, you can download one (or both) of the following scripts:

Requirements

I have only tested this with JQuery version 1.3.2. Not sure if it works with older versions, If you give it a try, come back and let me know!

Implementing

Implementing the plug-in is pretty straight foward, you just need to have a container that contains a group of images, like so:

<div id="MySlideShow" style="display:none">
   <img src="sample1.jpg" width="250" height="150" alt="This is caption 1." /><br />
   <img src="sample2.jpg" width="250" height="150" alt="This is caption 2" />
</div>

So now that we have declared our slideshow container, all we need to do is call the plug-in to activate it. Oh yeah, you might notice that I have added a <STYLE> declaration and also I have a <BR> in there. The <STYLE> is used to set the CSS display property to none. This ensures that all the images are hidden while the page loads. And the line-break is so the images display somewhat nicely for people that have JavaScript turned of or older browsers. Neither of these items are required, but it makes for a better experience for your visitors. Anyways, back to starting our slideshow.

The most basic implementation is as follows: (This code needs to be placed in the header section of your page)

$(function() {
   $(document).ready(function() {
      $("#MySlideShow").cjSimpleSlideShow();
   });
});

I tried to make the plug-in work without you having to pass an arguments to it. It will attempt to determine the image container's width and height settings, but this method is far from full-proof. The best way to activate the plug-in is to pass these values or declare a CSS rule for the container:

Passing width and height values example

$(function() {
   $(document).ready(function() {
      $("#MySlideShow").cjSimpleSlideShow({
         width: "250px",
         height: "150px"
      });
   });
});

Declaring a CSS rule example

#MySlideShow { display: none; width: 250px; height: 150px; }

User Settings

You have a few options other than the width and height, that you can pass to the plug-in. These change basic functionality and are listed below: