jShowOff: a jQuery Content Rotator

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from all the child <div>'s inside a specified wrapper <div> (on which the call to .jshowoff() is invoked) and rotating through them, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

Required Files

1. the jQuery Core JavaScript Library (1.3+)
2. jquery.jshowoff.min.js

To get jShowOff up and running, simply include the above files on your page, create the required slides markup and invoke the method (example below). You can use the default skin (jshowoff.css) from the demo, or restyle the elements to your liking. NOTE: Source files are maintained at github.com/ekallevig/jShowOff.

How to Use

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>

Options

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.
cssClass	string	true	Add an additional custom class to the .jshowoff wrapper.

Future Features

• Option to turn off 'Pause' animation.
• Allow use of any element for slides, not just <div>'s.
• Option to use 'slide' animation instead of 'fade'.
• Option to show slides randomly.
• Option to pause on hover.
• Slide captions.

Download

Source files are maintained at github.com/ekallevig/jShowOff. To quickly grab the bundled demo files, click the 'Download' button on the right.

Change Log

0.1.1

• Added error check for changeSpeed set less than speed.
• Added 'cssClass' option to specify additional class on .jshowoff wrapper.
• Now possible to invoke multiple instances, each with unique classes (for container, controls and links).

0.1.0

• Initial release.

License

jShowOff is free for personal and commercial use under the MIT/GPL license used by the jQuery core libraries. Donations are appreciated, but not required (see 'Donate' button on the right).

Author

This plugin was written by Erik Kallevig.