jShowOff: a jQuery Content Rotator Plugin
I’ve released my first ‘official’ jQuery plugin called jShowOff (I know, the name’s a little silly but I wanted something unique). It’s a simple plugin, but it serves a common need: a content rotator, often seen at the top of homepages to promote content within a site. It’s ‘official’ because it actually extends the jQuery object and follows the few design patterns recommended by the jQuery team. I started with an old slideshow script I wrote a while ago, then heavily modified it and added a number of options. Check out the demo and documentation page and let me know what you think!
HTML Slide
Example of an HTML slide.
Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.
How it works
Right now, it works by taking all the child <div>’s from the container <div> on which the method was invoked and storing them in an array for adding to and removing from the container. Eventually I’ll modify this to accept any child elements of the container, but for right now, it’s just <div>’s. A counter is used to keep track of the current slide and to know when the first and last slides have been reached.
I used the same caching mechanism as the slideshow script, which simply loads each div into an array (and subsequently into the browser’s cache). The slideshow script had an option to set the number of items to cache ahead of time, since it dealt with long lists of photos, but I removed it here, since usage will likely only need to support a small number of items.
Getting started
The required markup for jShowOff is a parent <div> with one or more child <div>’s, which will be used as the ’slides’. The following is a basic example:
<div id="features">
<div><p>This is a slide!</p></div>
<div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#features').jshowoff(); });
</script>
Customize it!
jShowOff currently has a few options for customization, hopefully more in the future. Pass these settings as an object to the .jshowoff() method like this:
$('#features').jshowoff({ speed:1500, links: false }); });
| Property | Type | Default | Description |
|---|---|---|---|
| speed | integer | 3000 | Time each slide is shown in milliseconds. |
| changeSpeed | integer | 600 | Speed of transition in milliseconds. |
| controls | boolean | true | Whether to create & display controls (Previous, Next, Play/Pause). |
| links | boolean | true | Whether to create & display numeric links to each slide. |
| autoPlay | boolean | true | Whether to start playing immediately. |
The demo uses a very basic style, but I’ve purposely isolated all the generated elements with specific id’s and classes to allow users to skin it as they please.
There are plenty of features I’d like to add and I’ll be keeping track of them on the demo page, so hopefully it will grow in time. I also used this project as an excuse to learn Git version control in conjunction with GitHub. Both have been pretty easy to pick up and GitHub has some really good resources for jumping in (besides their very nice web tools). It’s not hard to see why the jQuery team is now using them. Enough talk, now give it a try and tell me what you think!