jQuery Waterwheel 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 callback functions can be used to programatically trigger Lightbox-type effects, or load specific content into another region of the website. There are a lot of possibilities here.

Features/Notes

  • Horizonal or vertical orientation.
  • Numerous callback functions for when items move in and out of the center position.
  • Callback function for when an item has been clicked.
  • Little CSS required.
  • Supports images of the SAME dimension only.
  • Speed, animation type, and item positions and distances are all tweakable.
  • Change the number of "flanking" items, as well as their opacity (you can turn transparency off as well).
  • Circular effect achieved by cascading to opposite side when 'edge' hit.
  • Very customizable with many options.
  • Several example cases in the download index file.
  • Works in Chrome, FireFox, Safari, and IE7+. Limited support for IE6.

Standard demonstration with autoPlay on:

How to Use

When you download the carousel, you will have an HTML file with several examples included that you can pull code from. As with most jQuery plug-ins, this carousel requires the following:

  • The jQuery library; works with at least version 1.4 (include in header of your page)
  • The carousel javascript file (include in header of your page, after the jQuery library)
  • A small amount of CSS
  • HTML code with the images listed.
  • jQuery code to initiate the script (as seen below)
<script type="text/javascript">
  $(document).ready(function() {
    $("#waterwheelCarousel").waterwheelCarousel({
      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
  });
</script>

The carousel is passed in just one argument: a Javascript object containing key/value pairs for setting options. You can see the available list of options on this page.
You should be good to go with the carousel now. Open up the example index.html file and toy around with the configurations. If you have any issues with it, check the FAQ, and then check the comments here. Maybe someone solved the problem for you. I have tried to make using the carousel as painless as possible!

Comments

Waterfall Carousel in JQuery UI Accordian

Submitted by Carl (not verified) on

Hi Brian,

Great job, looks very professional, I am trying to use your carousel in a JQuery UI Accordian, but I need the Accordian to be collapsed when the page is loaded, when I set the active state of the Accordian to false the carousel is not rendered correctly, I am fairly new to JQuery but is it possible you have an event that fires once the content of the carousel has finished loading? (This works fine when the active state is true for the accordian)

Thanks,

Carl

setCenter programatically?

Submitted by paul (not verified) on

Great carousel--I've used quite a few.

Quick question: I may be missing it, but is there a method to set the center item programmatically? This is not the same as startingItem; calling this based upon user input seems to send the carousel into crazyMode ;)

Also--the movedFromCenter, movedToCenter event callbacks seems to fire when the carousel is first started on $(document).ready(); is there a way to suppress these events when the carousel first starts?

Thanks much--
PP

"preload" - or sth like that

Submitted by Gwoździu (not verified) on

Hi, Great script, i think the best one for the waterwhell-effect ever made. I have one problem. I would like to delete the img spread effect at the beginning of the animation. Is that possible ? I hope so. I have about 12 img in that slider so when it starts it really do not like cool when they spread automaticly - kind of a mess - if not delete maybe i can reduce the numeber of spreading img to 5 and the rest will load in background?

This is by design. The idea

Submitted by Brian on

This is by design. The idea is that once a user interacts with teh carousel, they don't want it to control itself any longer. I make no assumptions about what a developer may do when an item is clicked. They may not want the autoplay to continue.

problem with IE

Submitted by Éderson (not verified) on

Hello Brian. great work! .. I was using your carousel on my site, and when i open this on IE, the images goes wrong on page, with minimum size.. and dont work well. If i refresh or click in another link, and back to the Home (the place where is this carousel) the carousel begins work corectly... can help me with this insue?? the link: CLICK HERE

Thanks!!!

Scrollbar possible?

Submitted by jmb (not verified) on

Hi Brian. great work! How could I add a scrollbar to the carousel? so not only would you click 'previous' and 'next' but could slide the images left and right using a horizontal scroller.

Also needing help regards callback function; i want the item, when moved to the center or clicked, to be selected so when they click on a 'next' button their selection has been parsed to the next page.

Any help much appreciated!

Not possible with the current

Submitted by Brian on

Not possible with the current set up... I'm working on expanding the bevahior of the carousel to rotate HTML emlements, not just images, but still in the planning stages. I didn't get anywhere with the slider either. Sorry!

movingToCenter & movingFromCenter Synchronously

Submitted by James (not verified) on

Hi Brian,

Firstly, absolutely smashing plugin, the basis for me as a plugin was exactly what I was looking for!

Over the last few days I have expanded/extended it somewhat, converting the pluging to work with DIVs, and adding such options as instantLoad, which causes the load transitions to happen instantly on the initial load of the carousel, an option to enable/disable clicking on items in the carousel to 'rotate' it, an option to enforce 'single steps' of the carousel, so it only rotates one item at a time, etc.

One feature I'm struggling with somewhat are two of the callbacks, the two which happen 'before' an item moves to or from the center. It seems to me that if Im performing an animation on the item before it moves from the center, that animation happens simultaneously with the carousel moving, whereas what I would really like, is for the callback to finish, and after which, the carousel rotates.

The specific example in mind is, for one of my panels, I use the movedToCenter callback to expand the width of the div, and change the 'left' property of all of the divs to suit, I would then like to use movingFromCenter to do the reverse, reduce the width, and alter all of the div's 'left' property appropriately, and then allow the carousel to resume it's own animation.

I have experimented with two new callbacks, beforeMoveFromCenter and beforeMoveToCenter, but have been struggling getting .queue() to work as needed. I'm wondering if you had any suggestions on how I might implement what I am after?

Many thanks for the plugin, it's great!
Cheers
James

Just an update on the above;

Submitted by James (not verified) on

Just an update on the above;

I managed to cobble together a 'solution' but unfortunately it is rather ugly - simply hooking into the two event handlers for the optional carousel controls (which I use on all of the DIVs), I find out which panel is currently showing (ie before next or prev is clicked), if its the panel I want, i perform the reverse animations (shrinking and modifying all panels 'left' properties), and then pass in the moveOnce() function into the complete function on the animate, rather unelegant, but it works as desired. Obviously this ruins the script as a plugin, not at all modular. Have had no success 'extracting' the methodology and putting it in a callback to use on the front end. Any suggestions very welcomed!

Cheers
James

I've never tested the

Submitted by Brian on

I've never tested the carousel with transparent images, as they are known to cause some issues in jQuery animations (specifically in IE8). There may be some workarounds, but I don't have one at the moment.

Fixed!

Submitted by Hunter (not verified) on

So I read some of the other comments and managed to fix the issue. I put width and height elements on the tag and the css for the images, and also put background:none !important; filter:none !important; on all the css elements in the carousel, and seemed to fix the issues. Thanks again for the plugin.

Expecting Cyclic Rotation

Submitted by Sachin (not verified) on

Hi

I am expecting a update which should have the edgeReaction:'cycle'. This will just bring the first item to be the next one , when the user is at the last image in the collection. This feature is very much required to most of the developers and i hope you will adding this in the next update.

Thanks
Sachin Srivastava

Brian, I dont know what to do. 1.3 (latest version) isn't stable

Submitted by NeoSwf (not verified) on

Brian, I dont know what to do. 1.3 (latest version) isn't stable

again in IE9.
Out of 5 page refreshes, only 2 loads correctly :(

My JQ and plugin calls are at the footer (from performance and page loading time reasons). I'll try putting the script at the head, but we must solve this issue of head location, cause it impacting dramatically the rendering time of the page.

I hope things will get solved after this modification.

But why do we need to place to code at the head? Isn't doc.ready good enough to check the page elements and play with them?

yours
Shlomi Asaf.

The preload function probably

Submitted by Brian on

The preload function probably need some love for IE9. Try setting a fixed width and height for the images in CSS. If that doesn't work, in the preload function, add these two lines at the beginning of the function in addition to the fixed width and height. callback(); return;

Hey

Submitted by NeoSwf (not verified) on

I ahve setted in the css the dimentions.
In the function i gave this properties
$imageElements.each(function () {
$(this).width('490px');
$(this).height('190px');
}
In the callback I havent found the place I can approach single image.

Didn't work :(

External Events

Submitted by Cyro (not verified) on

Hi,
Thanks for this plugin, its really good! I have one little question: how can I use external events to trigger functions of waterwheel? Example: I've created a external holder with large images, and I link the click function of waterwheel to load a respective large image in the holder, but it works only when I click the thumbnail in waterwheel, and now I need to work when I click in the "move up", "move down" buttons cause when I click the "move up" button, the waterweel works, but theres no event to make my holder load the large image of the thumbnail that rolled. My current code is this:

$(function() {
var $list = $('#waterwheel-carousel-vertical');

var $currImage = $('#st_main').children('img:first');

$('').load(function(){
$loader.hide();
$currImage.fadeIn(1000);
}).attr('src',$currImage.attr('src'));

$list.find('.carousel-images img').bind('click',function(){
var $this = $(this);
$loader.show();
$('').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(1000,function(){
$(this).remove();});
}).attr('src',$this.attr('alt'));
});
});

Thank you so much!

Explain

Submitted by Michele (not verified) on

Can you better explain how did you do this?
I need the external holder (st_main) to load the center image and every other image that goes to the center!
Thanks

IE and PNG issue

Submitted by Anz (not verified) on

if anyone have issue with PNG images and IE.. just add a filter: '' to animate function (Line 191 ) and css function (Line 389) in the jquery.waterwheelCarousel.js.

modified code will look like following
-- Line 191--
$(this)
// Apply positioning and layering to the images
.css({
'left': newLeft,
'top': newTop,
'visibility': 'visible',
'position': 'absolute',
'z-index': options.flankingItems+2,
'opacity': 1,
'filter' : ''
})

-- Line 389--
.animate({
left: $item.data().left,
width: $item.data().width,
height: $item.data().height,
top: $item.data().top,
opacity: $item.data().opacity,
filter: ''
},data.currentSpeed,options.animationEasing, function () {

Reference: http://jc-designs.net/blog/2010/07/ie-png-problem-when-used-with-jquery-...

IE issues

Submitted by Vitalia (not verified) on

Hi There,

I have been following your advice but it didn't make any difference. Still the same issue in IE. The animation is there but all images (except 1st one) are very small size about 50px high.

Here is the example: http://webdesignhome.co.uk/new/index.html

It works in Mozila and I really would like to keep it but it doesn't work in IE.
I keep this link for a few days more in hope you reply me.
I keep looking for other slide with similar effect but there are not many of them. I am a designer not developer that's why I struggle.

Thank you and looking forward to hear from you.

Take care,

Vitalia

It's normal

Submitted by David (not verified) on

This is normal. Since the carousel is made to use images that are all the same dimensions, the first image will set the dimension's standard for all the images. To fix this, you can save all your images in PNG format and adding transparent content around them to made them all the same dimensions.

Example : Images must be 600x800px, so you take your image and open it in Photoshop, convert it to layer, go in the 'image' menu, click on 'canvas size' and enter a dimension of 600x800px. Then you will have a image of 600x800px with transparent filling. Start with the biggest image to set your dimension's standard and you should be alright.

David

good post

Submitted by SEO Sydney (not verified) on

I absolutely appreciate this excellent posting which are provided for us. I ensure this is advantageous for most people.

Not working properly in IE8

Submitted by Jeroen (not verified) on

First of all, the script is trully amazing.
It's exactly what i want but i conquer one problem.
I am using the horizontal plane demo version.
In IE8, it is not rendered correctly.
In the beginning all the images are rendered extremly small(mentioned before).
After a refresh, the caroussel is getting there but there are still errors in it(eg, picture 10 is rendered to much off the left offset).

Now the strange part is, even if i download youre package file, on a webserver it doesn't look good, but local it is.
Could you help me with this?

Desperate at the moment.

Regards,
Jeroen

good post

Submitted by SEO Florida (not verified) on

You produced some excellent details right now there. I did searching around the topic and discovered most people today will recognize in your blog.

how to implement colorbox

Submitted by Joe B (not verified) on

Hi, awesome carousel. I see that you've addressed coloxbox briefly in the FAQ. I'd like to embed content so that when the image is clicked, HTML content comes up in a lightbox/colorbox overlay. Is this possible with either carousel, particularly the waterwheel? Thanks, Joe

Query for auto play

Submitted by Tushar (not verified) on

Hello there is auto play setting which is fine and g8 but it is going on one direction only ie either on left or right, Can I do this way? when is going to left side and when we finished with images the automatically it will again start auto play on opposite side ,,,, and it will keep rotating same way left - right - left ....

Captions with Waterwheel?

Submitted by jamEs (not verified) on

I'm curious as to whether you can use captions with the waterwheel plugin? I see it's possible with the Feature carousel, but I can't seem to get it to work with this one. I'm using the vertical waterwheel and want to achieve a display info on hover, but haven't been able to make any headway.

Waiting for 1.4

Submitted by Jerad Rutnam (not verified) on

This is one of the best carousel script I ever got. very nice and thanks a lot for sharing with us. And I really need the function that allows user to go around (Cycle) images without stopping at the end and reset to the first. Hope you will release the version 1.4 soon.. :)

And I have added a small code to create a caption dynamically in my html (Im not a Good Developer but some how I managed to get it done). so if anyone else need it until you get version 1.4. you can try this out.... :D

Here is an Example -

JAVASCRIPT
----------------------------------------------------------------------

$(document).ready(function() {
$("#waterwheel-carousel-default").waterwheelCarousel({

movedToCenter: function($newCenterItem) {

var imageID = $newCenterItem.attr('id');
var imageName = $newCenterItem.attr('alt');

$('#'+imageID+'-information').show();

$('.carousel-image').ready(function () {
$(this).each(function(){
$(".waterwheel-carousel-caption").remove();
$('#'+imageID).after('' + imageName + '');
});
});
}
});

//$('img#imageName').after('ImageCaption'); /* If the Initial Caption didnt show.(Optional) */
});

HTML
----------------------------------------------------------------------

img class="waterwheel-carousel-image" id="imageID" alt="Name Image" src="images/carousel/Name_Image.png"

CSS
----------------------------------------------------------------------

#waterwheel-carousel-default .waterwheel-carousel-caption {
position:absolute;
top:160px;
width:100%;
text-align:center;
font-weight:bold;
font-size:12px;
color:#000000;
}
#waterwheel-carousel-default .carousel-feature .carousel-caption p {
margin:0;
padding:5px;
}


Good Lunck!!
And Thanks a lot Mr.Brian K Osborne for Sharing this code with us. And hope my little code will you out to get a small idea. :)

Regards,
Jerad Rutnam
www.dmusonline.com

Hello I'd like to make a

Submitted by Luleene (not verified) on

Hello

I'd like to make a continuous circle for this carousel and i tried your method but it seems like i can't get it to work.

Could you help me please and give further informations to do it the right way ?

Thanks in advance :)

Sincerely

Leene

Turn off opacity

Submitted by Sameer Joshi (not verified) on

Hi!
I have used the default jQuery waterwheel. I changed the number of flanking items to 2 and turned the opacity to 0, still the images are transparent. Can you please suggest me to turn off the opacity completely??

Is it possible to add a

Submitted by Daniel (not verified) on

Is it possible to add a script so that when I click on the image in the centre it expands to fill the screen?......I am looking at doing this you see and was wondering if you could comment...

its a great script by the way! If I use it I will be sure to give you full due credit!

There are a few ways to do

Submitted by Brian on

There are a few ways to do that... but it's not really practical. The biggest problem with that is that you'd have to have a really high res photo in the carousel and they would take ages to load. You might as well use colorbox to load a different version of the image.

Using Waterwheel plugin in Wordpress

Submitted by Tony (not verified) on

Hi there, I really like this plugin and I am trying to implement it on a Wordpress site. I have tried adding the script to both the content page (which worked with the cycle plugin on another site) and to the header.php, with no success. I also used the <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> code in the header.

I'm wondering if there is a plugin for wordpress that would help me to implement your jquery plugin or have you developed a plugin for wordpress that provides the same type of plugin?

Any advice would be greatly appreciated.

Waterwheel + Wordpress

Submitted by Gabe (not verified) on

Great plugin! Thanks for making it open source, Brian!

I just wanted to document that I (with @Tony above) am also having issues with Waterwheel + Wordpress. I have searched & troubleshot as much as I can. Just wondering if there may be something we are missing in Wordpress. Has anyone been able to utilize Waterwheel with Wordpress? If so, could you share implementation or any struggles you encountered? Thanks!

Synchronized two carousel

Submitted by David (not verified) on

Hi,

I need to get two vertical carousel synchronized together, so when i click on an image of the one to the left, the carousel to the right also move to the next image. Basically, its like to have the same event in both carousel, so I can show a thumbnail on the one to the left and get a bigger image on the one to the right. When we switch to the next image, the other carousel also switch....

Hope you can help me on this one.

You can check the page here, at http://dl.dropbox.com/u/19671984/site_web/site/affiche.html

Thanks,

David

Request

Submitted by Aashish (not verified) on

Dear sir
thank full to you that your slide image are very helpful for me but i have one issue i want to move that slide as aoutoPlay in this slide should aoutomove left to right and right to left continue so how it can possible through js Please guide me as soon possible .I am still waiting your response

Pages

Add new comment