6

I'm stuck on this one, so hopefully someone can help.

I have a website I am using jCarousel Lite on, and I have added a zoom in effect as well as a fade effect on the images. Here is the code for initializing 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 have been trying to get this working on.

link

If you watch the carousel everything runs fine the first go around, but after that the first image in my unsorted list no longer zooms. The rest of the images in the list will continue to zoom, it's just the first one that is having this problem. I think it might be jCarouselLite that is at fault, but I couldn't find anything. Thanks.

/* EDIT */

StackOverflow wouldn't allow me to answer my own question since I just created this account. So I figured I would just edit the original and add it in. Sorry if this isn't considered kosher.

Ok, I have come up with a solution. Instead of firing an animation on the individual image that is visible, I had to fire the animation on each image in the carousel. Then I used the callback of jcarousellite for after completing to stop all animations on all the 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
});

}

If someone knows of a better solution, or how to get it work on the individual images, please let me know. Thanks.

Shamoon
  • 41,293
  • 91
  • 306
  • 570
noub
  • 103
  • 1
  • 6
  • rather than removing style could you just set it to the style you want? or just set the cssText attribute of the style to `""`? IMHO it seems to me that removing the whole attribute is overkill. – James Khoury Jun 22 '11 at 01:28
  • In the future, please post your answer as an answer, instead of editing it into your own question. You can answer your own question after a couple of days, and even accept it. Also, the request for a "better solution" only works if you define what "better" is here. I'm going to close this question as "not a real question". – Lasse V. Karlsen Jun 28 '11 at 14:34

0 Answers0