-1

I need to modify this plugin to rotate images without waiting for animation to end. If you visit that link you might notice that animation restarts at the the end of previous animation but i want images back to back so i dont want to wait for end of the first animation to start next one. Any idea how to do that. Relevant code snippet from that plugin is 

el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {

//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });

//restart animation. Problem is to restart it when last image completey appears with out pausing current animation.
animator($(this), duration, "rtl");

//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;

});
Ayaz Alavi
  • 4,825
  • 8
  • 50
  • 68

1 Answers1

2

You'd have to approach this completely differently. You'd either have to duplicate all the images and use two containers and as one is completely hidden, move it to the right or pop images off the left side and add them to the right side as they disappear off the page.

methodin
  • 6,717
  • 1
  • 25
  • 27
  • Doing the second method requires quite a bit of change to the code as you'd have to set the left property on the images independently and not on the container. – methodin Sep 30 '10 at 15:27
  • I suggest the second method. The animator function will almost support it as is. I think you just would need to compare the position of the image with the "viewer" div to see if it's out of view. If it is, stop animation and start again at the beginning. – fehays Sep 30 '10 at 15:33
  • 2 containers approach is not feasible and I couldn't get how to implement second method. Any ideas how to pop image from left and push it on the right? – Ayaz Alavi Oct 01 '10 at 07:17
  • 1
    Imagine you have an array of 5 image elements that represent the icons shown. Their starting left styles of 0px, 50px, 100px, 150px, 200px. Your loop will set the left style of each of the image elements -= 10 on each iteration. Then you just check if array[0].left is less than -50 (if your images are 50px wide) and if so, remove it from the array, add it on to the end of the array, and set the left style to 200px and so on. – methodin Oct 01 '10 at 11:05
  • great idea, I never thought of using arrays. – Ayaz Alavi Oct 03 '10 at 18:55