Waterwheel Image Carousel FAQ

The carousel is not showing up

There are a few reasons this could happen.

  • Open the developer console in your browser and for any exceptions that the carousel may have thrown.
  • Make sure you've specified a specific width and height for the carousel container.
  • Be sure the options you passed in make sense. You shouldn't make the starting feature -4 for instance. Also, make sure there is no trailing comma at the end of the last option. This will break the carousel in IE.
  • Make sure you included the plugin javascript file AFTER the jQuery javascript file in your webpage's header.
  • Check to make sure you initiated the carousel properly, and wrapped the code in a (document).ready function.
  • It's possible the image pre-loader did not work properly. If you refresh the page a few times, does it work? If so, shoot me an email or comment and let me know (include your browser and platform).

The carousel is not behaving or animating properly

This usually happens when images of different proportions are passed in or you included non-image content in the carousel area. The only HTML elements allowed are image tags with optional anchor tags surrounding them. Make sure that all items are the same width and height. You can ensure this by setting their width and height in CSS. Also, certain browsers may not render the animations as quickly or smoothly as other browsers. You may try setting the option "quickerForFurther" to false, and slowing down the animation speed.

Can I link the images?

Absolutely. Links are completely supported as of version 1.2. You can use the linkHanlding option to determine what happens when images with anchor tags are clicked.

Can I add text or other content around the images?

Not at this time. The feature carousel supports this, and I plan on bringing that functionality into this carousel in an upcoming release. However, you can probably manage this yourself by using the callback functions.

Does the carousel support Lightbox/Colorbox/etc?

The carousel was not designed to be used to display larger images in a lightbox. Its true purpose was to load/display content related to the images in the carousel using the two available callback functions. With that said, you can use any lightbox type plug-in that supports initiating manually. Unless you know what you are doing, you will likely run into trouble with normal "automatic" implementations of Lightboxes (that depend on specific classes or tags on the images) because the code will conflict with the carousel.

Colorbox supports manually loading the lightbox. Here is an example of how to launch a colorbox containing the image in the center of the carousel once clicked (though this is pretty useless; I'd suggest altering this to load a larger version of the image).

$("#waterwheel-carousel").waterwheelCarousel({
  clickedCenter: function($clickedItem) {
    // obtain the image src of the clicked center item
    var clickedImageSrc = $clickedItem.attr("src");
    // build a new image HTML image element, and fill in the src
    var $imageToDisplay = $("").attr("src",clickedImageSrc);
    // display a colorbox
    $.colorbox({html: $imageToDisplay});
  }
});

And likewise for when using the Facebox plugin:

$("#waterwheel-carousel").waterwheelCarousel({
  clickedCenter: function($clickedItem) {
    // obtain the image src of the clicked center item
    var clickedImageSrc = $clickedItem.attr("src");
    // build a new image HTML image element, and fill in the src
    $.facebox({ image: clickedImageSrc });
  }
});