title: jCarousel Lite with Zoom and fade effect
body: <p>I'm stuck on this one, so hopefully someone can help.</p>
  
  <p>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.</p>
  
  <pre><code>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
      });
    }
  </code></pre>
  
  <p>Here is the website I have been trying to get this working on.</p>
  
  <p><a href="http://stylenet.com/AggieHairShapers/" rel="nofollow">link</a></p>
  
  <p>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 <a href="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js" rel="nofollow">jCarouselLite</a> that is at fault, but I couldn't find anything.  Thanks.</p>
  
  <p>/* EDIT */</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><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
  });
  </code></pre>
  
  <p>}</p>
  
  <p>If someone knows of a better solution, or how to get it work on the individual images, please let me know. Thanks.</p>