ShowBox jQuery Plugin

Description

ShowBox is yet another slider plugin for jQuery. It aims at begin simple, while playing nice with liquid layouts, multi-sized images, and static one-pass HTML formatters.

Download

Get the plugin source, and the minimal stylesheet.

Usage

Basis

Just create a block element (a div, typically), and throw in some images and links:

<div class="test">
  <img src="images/4.jpg" />
  <a href="http://www.example.org/">
    <img src="images/5.jpg" />
  </a>
  <img src="images/6.jpg" />
</div>

Then load jQuery and the ShowBox plugin, and call the ShowBox() function on the appropriate selection, like so:

$(".test").ShowBox();

Options

There are a couple options you can pass to ShowBox() using an associative array. Here are the default values and their meaning:

{ 
  'pause' : 1000,  // Pause duration (in milliseconds)
  'play'  : 1000,  // Transition duration (in milliseconds)
  'center': true,  // Images are verically centered
  'mouse' : true,  // The slide show pauses on mouse over
  'args'  : false, // Arguments cannot be extracted from HTML 
                   // comments
}

Last option needs a little explaining: args, if set to true, tells the plugin to examine the DOM and try to extract options from the first encountered HTML comment in an selected element. For instance, one could write:

<div id="some_element">
   <!-- {"mouse": false, pause: 2000} -->
   <img ... />
   ...
</div>

Then invoke:

$("#some_element").ShowBox({"args": true});

It gives an alternative to parameterize elements in-place, instead of performing multiple calls to ShowBox(). Needless to say, it should only be used when you trust the HTML source, as it evaluates arbitrary JavaScript in the client.

Demo

(Look at the source of this page to see the details.)