JCarousel Lite with Zoom and Fade

Question

JCarousel Lite with Zoom and Fade

I am stuck with this, so hopefully someone can help.

I have a website that I use jCarousel Lite on, and I added a zoom effect as well as an image fade effect. Here is the code to initialize jCarousel lite.

window.onload = function() { jQuery("#midbody").jCarouselLite({ auto: 3000, speed: 0, circular: true, beforeStart: function(a) { width = jQuery(a).find("img").width() * zoom; height = jQuery(a).find("img").height() * zoom; jQuery(a).stop(false,true).find("img").animate({"width":width, "height":height, "top":move, "left":move}, 2000, "linear", function(){ jQuery(this).removeAttr("style");}); jQuery(a).parent().fadeTo(1000, 0); }, afterEnd: function(a) { jQuery(a).parent().fadeTo(1000, 1); }, visible: 1 }); }

Here is the website I was trying to get this to work on.

link

If you watch the carousel, everything works fine, the first time, but after that the first image in my unsorted list no longer scales. The rest of the images in the list will continue to grow, this is only the first one that has this problem. I think it might be jCarouselLite , which is to blame, but I could not find anything. Thanks.

/ * EDIT * /

StackOverflow did not allow me to answer my own question since I just created this account. So I decided that I would just edit the original and add it. Sorry if this is not considered kosher.

Ok, I came up with a solution. Instead of activating the animation on a separate image, which is visible, I had to shoot the animation on each image in the carousel. Then I used the jcarousellite callback to complete, to stop all animations on all images, and reset the style attribute. Here is the revised code.

 window.onload = function() { jQuery("#midbody").jCarouselLite({ auto: 5000, speed: 0, circular: true, beforeStart: function(a) { width = jQuery(a).find("img").width() * zoom; height = jQuery(a).find("img").height() * zoom; jQuery(a).parent().find("img").animate({"width":width, "height":height, "top":move, "left":move}, 2000, "linear"); jQuery(a).parent().fadeTo(1000, 0); }, afterEnd: function(a) { jQuery(a).parent().find("img").stop(true,true).removeAttr("style"); jQuery(a).parent().fadeTo(1000, 1); }, visible: 1 });