Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Simpler Slideshow 1.0

A Simpler Cross-Fade Slideshow Plug-In for JQuery

JQuery Plug-In: CJ Simpler Slideshow v1.0

CJ Simpler Slideshow is a basic slideshow plug-in for jQuery. It dissolves between a series of images located within a user defined block. This project is based off another one of my projects, CJ Simple Slideshow. I had a few request to allow the user to supply links for some of the images. The only problem with changing the other project was that it wasn't a simple fix, so I decided to create a brand new plug-in based on it. The other plug-in was designed to use a mouseOver to pause the script. This interfered with any mouseClicks, so a new project was decided upon.

Requirements

This version is using JQuery version 1.4.2. I've also tested it with jQuery 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: (notice the link around one of the images)

<div id="MySlideShow">
   <a href="link.html"><img src="sample1.jpg" width="250" height="150" alt="This is caption 1." /></a><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").cjSimplerSlideShow();
   });
});

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

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

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