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.

Learn More ›

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 }); });

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!