WATERWHEEL JQUERY CAROUSEL

This jQuery plugin can display images with a cascading waterfall effect. It can be positioned either horizontally or vertically, and custom events can fired when an image rotates into the center or is clicked. The appearance of the carousel is very customizable.

How to use this plugin

Download the plugin ZIP package from the link below. For this plugin to work, you will need to include the latest version of jQuery on your webpage BEFORE including this script. This plugin currently works with jQuery verson 1.4, and will most likely work with any further releases. It was originally developed using version 1.3, but will no longer work with that version.

Head Code

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>

a smidgen of CSS

#waterwheelCarousel {
	height:230px;
}
#waterwheelCarousel > img {
	display:none;
}

The basic Carousel

<div id="waterwheelCarousel">
	<img src="image1.jpg" alt="Test Image 1">
	<img src="image1.jpg" alt="Test Image 2">
	<img src="image1.jpg" alt="Test Image 3">
	<img src="image1.jpg" alt="Test Image 4">
	<img src="image1.jpg" alt="Test Image 5">
</div>

Finally: some control script

<script type="text/javascript">
    $("#waterwheelCarousel").waterwheelCarousel("horizontal",{
    // include options like this:
    // (use quotes only for string values, and no trailing comma after last option)
    // option: value,
    // option: value
    });
</script>

Troubleshooting

This plug-in has been in on and off development for several months and has seen numerous revisions. If you have any problems using it or find any bugs, PLEASE USE THE CONTACT LINK ABOVE to send me an email so I can fix it!

The carousel isn’t showing up

There are a few reasons this could happen.
(1) – Check to make sure the structure (HTML code) for each feature is the same as the example above.
(2) – Be sure the options you passed in make sense. You shouldn’t make the starting feature -4 for instance.
(3) – Make sure you included the plugin javascript file AFTER the jQuery javascript file in your webpage’s header?
If you still have problems, contact me and I will respond ASAP.

The animations look strange

If the animations look strange, check the following:
(1) – Are all your images the same size? If you aren’t specifying an exact height and width for the features, make sure all the images are the same dimensions. The carousel doesn’t support images of different sizes.
(2) – Make sure the easing method you passed in as a parameter is valid AND you included the javascript plugin for easing ABOVE the JS file for the carousel and BELOW the JS file for jQuery.
(3) – Internet Explorer does not render animations as quickly as Firefox, Safari, and Chrome do. Because of this, if the carousel is rotating very quickly, it may look like its not animating at all! To fix this, set quickerForFurther to false in the options.