Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Simple Slideshow 2.0

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:

ArgumentDescriptionDefault
autoRunDetermines if the slideshow starts automatically. If you set this to false, then you will need to start the slideshow by calling $("#MySlideShow").init();true
bgColorThe background color to use.#ffffff
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
heightThe container height. This accepts standard CSS height values.0
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
textColorDetermines the color to use for text within the container. Accepts standard CSS color values.#ffffff
textFontDetermines the font family to use for text within the container. Accepts standard CSS font-family values.Arial, Helvetica, sans-serif
textShadowDetermines if to display a text shadow for text used within the container. Only visible for browsers which accepts this option.true
textSizeDetermines the font size to use for text within the container. Accepts standard CSS font-size values.11px
textStyleDetermines the font style to use for text within the container. Accepts standard CSS font-style values.normal
textWeightDetermines the font weight to use for text within the container. Accepts standard CSS font-weight values.bold
widthThe container width. This accepts standard CSS width values.0