Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Simple Slideshow 2.1.1

A Simple Cross-Fade Slideshow Plug-In for JQuery

JQuery Plug-In: Simple Slideshow v2.1.1

Ok, I'm not perfect. My first attempt at a jQuery plug-in was a disaster. It worked great in FireFox and Safari, but it failed miserably in Internet Explorer. I should of known to do a little more testing before I released it, but it was late and I had a bunch of real work to do, so I rushed things. But as the old saying goes, if it doesn't kill you, it only makes you stronger.

In doing this re-write, I made some changes that I think fit more in line with what I was trying to do in the first place. Version 2.0 was a little more complicated than what I intended it to be, I blame this on the excitement of writing my very first jQuery plug-in. On this version I decided to follow my original mandate of keeping things simple.

What was so complicated you ask, well for starters I was allowing you to set styles for the text strings used within the block, i.e. Pause and the caption. In this version, I've added a classname to the containers so you can use simple CSS to style them. It just didn't make sense to over complicate the plug-in with this kind of stuff. The other thing I had going on, was some fancy image centering code. As I was debugging for Internet Explorer, I realized how complicated and messy it was. So I greatly simplified it.

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!. Also, I have tested this with FireFox 3, Internet Explorer 6 & 7 and Safari 4.

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">
   <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>

You can style the container with standard CSS. The plug-in will create a wrapper arround the images with a class name of "cj_slideshow_wrapper". It will also create a pause block with a class name of "cj_slideshow_pause_wrapper" and lastly it will create a caption wrapper with a class name of "cj_slideshow_caption_wrapper" (If you choose to show captions). These elements can be styled pretty much any way you please. You just have to be careful not to set the positioning, since the plug-in handles this automatically. For further information, you can check out the demo page for an example of how to style these elements.

Ok, now to activate the slideshow, you need to call the plug-in by placing a load wrapper in your header...

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

...or, place on onload in your body tag, like so:

<body onload="$('#MySlideShow').cjSimpleSlideShow();">

But this method is so un-jquery like, don't you think?

Declaring a CSS rule example

It's important to set the width and height of your container block. Weird things might happen in Internet Explorer. You should set the display to "none" if you plan to have a lot of images, this way they don't all show up when the page is loading.

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

User Settings

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

ArgumentDescriptionDefault
autoRunDetermines if the slideshow starts automatically. If you set this to false, then you will need to start the slideshow by calling $("#MySlideShow").start();true
centerImgThis is still in the beta stage, but it will attempt to center the images within the main container box.false
delayThe delay in miliseconds between slide transitions,3000
dissolveThe amount of time in miliseconds that it takes to do the transition between slides.70
showCaptionsDetermines wether or not to display the slide captions. If set to true, the plug-in will use the value of the images ALT tag for the slide caption.true