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:
| Argument | Description | Default |
|---|---|---|
| autoRun | Determines if the slideshow starts automatically. If you set this to false, then you will need to start the slideshow by calling $("#MySlideShow").start(); |
true |
| centerImg | This is still in the beta stage, but it will attempt to center the images within the main container box. | false |
| delay | The delay in miliseconds between slide transitions, | 3000 |
| dissolve | The amount of time in miliseconds that it takes to do the transition between slides. | 70 |
| showCaptions | Determines 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 |
8 responses to "CJ Simple Slideshow 2.1.1"
In other words: I would like to be able to click the images and popup a large version of the image in a div. Any ideas on how to accomplish this ?
Otherwise this is just great. Love it!
Better than the other slideshows I've found and they don't even work as fine as yours.
}).html("Paused").addClass("cj_slideshow_pause_wrapper");
to
}).addClass("cj_slideshow_pause_wrapper");
Sorry about that!
Cheers
Give me a bit to think about it, I think I'm going to have to re-write a significant portion of the plug-in in order to do this.
That should do the trick. If not let me know.
Am very much novice with jQuery and find this really help/clear.
I would like to use the plugin for three sets of images sitting side by side. I implemented this, but I want to delay the middle fade so it starts later than two on either side.
I attempted to do this with this code:
$(function() {
$(document).ready(function() {
$("#slideshow1").cjSimpleSlideShow();
$("#slideshow2").cjSimpleSlideShow("delay",8000);
$("#slideshow3").cjSimpleSlideShow();
});
});
but the delay isn't behaving as I expected. Any suggestions?
$("#SlideShow2").cjSimpleSlideShow("delay", 8000);
try:
$("#SlideShow2").cjSimpleSlideShow({delay, 8000});
It looks like the script doesn't work unless you pass it an OBJECT of parameters.