FerretArmy.com jQuery UI Image Carousel Plugin

What is it?

The image carousel plugin is a jQuery UI plugin that displays an unordered list of images as a carousel with forward and back buttons.

The carousel requires jQuery and jQuery UI to work. It is completely themable with jQuery UI.

Download

This plugin is hosted on Google Code. Download the latest version here.

Compatability

There are no known issues with plugin compatability. Tested in IE 6-8, Firefox 3.5, Google Chrome, Apple Safari 4.0, Opera 10.

Discussion

Questions and comments will be handled through the Google Code site. Also, if you like this, please check out my Image Overlay plugin.

Changelog

1.0 - Initial Release.

How to Implement

First, include the Image Carousel CSS file in your page header.

<link rel="stylesheet" type="text/css" href="ImageCarousel.css" />

Next, add the Image Carousel JavaScript file AFTER you include your jQuery/jQuery UI installations. jQuery 1.3.x is required, for compatibility with jQuery UI (which should be at least 1.7.x).

<script type="text/javascript" src="path-to-jQuery/jquery.min.js"></script>
<script type="text/javascript" src="path-to-jQuery-UI/jquery-ui.min.js"></script>
...
<script type="text/javascript" src="jquery.ImageCarousel.min.js"></script>

Create the carousel html. Here are the guidelines you should follow for galleries:

• Ideally, all images should be the same height. The carousel will work properly with images of different widths, though.
• The carousel header is optional. Make sure to set the 'display_header' to false if you aren't including one, for display purposes.
• The carousel classes ('carousel', 'carouselHeader' if your carousel has a header, and 'carouselBody') must be included on the carousel for everything to function properly.
• The carousel element must include the 'carousel' class in order to use any of the styling in the ImageOverlay.css file.

Here is an example of carousel html.

<div class="carousel">
  <h2 class="carouselHeader">My Image Gallery</h2>
  <div class="carouselBody">
    <ul>
      <li>
        <a href="http://www.google.com">
          <img alt="Image 1" src="testImages/Image1.jpg"/>
        </a>
      </li>
      <li>
        <a href="http://www.google.com">
          <img alt="Image 2" src="testImages/Image2.jpg"/>
        </a>
      </li>
    </ul>
    <a href="#" class="btnNext">Next</a>
    <a href="#" class="btnPrevious">Previous</a>
  </div>
</div>

Finally, attach the Image Carousel control via JavaScript.

$(document).ready(function() {
  $('.carousel').ImageCarousel();
});

Here is an example of a carousel load function with options (see directly below for an explanation of available options).

$('.carousel').ImageCarousel({
  carousel_width: '200px',
  display_header: false,
  carousel_speed: 'fast'
});

Options

 

Advanced Usage

This plugin supports the metadata plugin. You must have the metadata plugin installed to use these features. Refer to metadata plugin documentation for instructions.

In order to override or add additional options on the carousel, you can just add the options after your carousel class name using the metadata syntax. Any Image Overlay option can be overridden using this technique.

...
  <div class="carousel { carousel_width : '200px' }">
...

 

Custom Work or Installation?

I'm available to customize the jQuery UI Image Carousel to your needs on a freelance basis. If you're interested in my services, please contact me at nealjonv at gmail dot com.