Need help animating a jquery carousel

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Need help animating a jquery carousel

Post by drayarms »

Hello, I'm building a picture carousel. Here is a demo below:

http://flirtchatmingle.com/test/picture.php

The colored boxes are frames with fixed position withing which the pictures are placed. I just gave them colored backgrounds for this demonstration. The frames all belong to a class called "frame" and the pictures in a class called "picture". I dynamically assigned ids to all the frames( frame0, frame1...) and to all the pictures(picture0, picture1, picture2...) . By default, all the pictures and frames are hidden, but in a script, I stack up the frames as they appear in the demo, and then show the pictures in their corresponding frames, picture 0 -> frame0, picture1-> frame1... etc

Now the problem I face is the animation part. I want each picture to to move to the next frame in the stack, so picture3 should move to frame2, picture 2 to frame1, picture 1 to frame0, picture0 to the last frame(on the right of frame0), the last picture, to the last but one frame, etc, when the forward arrow is clicked. And I Want to do the opposite for the back arrow. And here is the code I used. I'm just going to include the forward and back functions and not the entire code for what already works. The logic behind the code is simple, first, I append each picture to the new frame where I expect it to go. Then I get the new position and dimension of the picture based on the frame to which it has been appended to, and finally, run the animation.

for some reason I can't understand, picture1(the one on the left of the centered picture) won't move at all, when the forward button is clicked. and it stays in place even when subsequent pictures try to occypy its frame(frame1). And picture0(the one in the center) entirely skips the last frame, and moves to the last but one frame instead. Anyone knows why this is the case? Or can anyone suggest a better way to do the animation?

PS: the variables picture_count and frame_count used in the script, represent the number of pictures and frames respectively and I use them interchangeably since they represent the same number. The variable width, is the width of frame0, the center frame.

The frames/pictures are numbered 0 to frame_count-1, starting from the center frame/picture, and running counter clockwise.

Code: Select all


	$(document).ready(function() {// ...A whole lotta code that arranges the frames in a stack and makes the pictures visible withing their   respective stacks

		$("#pic_fwd").click(function() {// Push picture ahead by one frame


				
			for(i=0; i<picture_count; i++){//Do the following to all pictures



				if(i==0){//For frame0, the center frame

					var pic = $(".picture").slice(0,1);//Assign current pic to a variable

					var frame = $("#frame"+(picture_count-1));//Assign last frame to a variable

					var new_width = $("#frame"+(picture_count-1)).width();//The picture assumes width of preceding frame 

    					function move_animate(element, newParent){

        					var old_offset = element.offset();//Get current position of picture

						var oldz = element.css("z-index");//Get z index of current picture

        					element.appendTo(newParent);//Place picture in last frame

        					var new_offset = element.offset();//Get current position of picture

        					element.animate( {"top": new_offset.top, "left":new_offset.left, "width":new_width}, "fast", "easeInBack");


    					}//End move animate function

				}else{//Rest of the pics

					var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

					var frame = $("#frame"+(i-1));//Assign preceding frame to a variable

					var new_width = $("#frame"+(i-1)).width();//The picture assumes width of preceding frame 

    					function move_animate(element, newParent){

        					var old_offset = element.offset();//Get current position of picture

						var oldz = element.css("z-index");//Get z index of current picture

        					element.appendTo(newParent);//Place picture in last frame

        					var new_offset = element.offset();//Get current position of picture					
        							
        					element.animate( {'top': new_offset.top, 'left':new_offset.left, "width":new_width}, "fast", "easeInBack");


				}//End of for the rest of the pics other than pic0

           									        										
    				}//End move animate function						



				move_animate(pic,frame);//Do the animation





			}//End of for loop that loop through all pictures



		});//End pic foward click function
















		$("#pic_back").click(function() {// Push picture back by one frame


				
			for(i=0; i<picture_count; i++){//Do the following to all pictures



				if(i==picture_count-1){//For last frame

					var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

					var frame = $("#frame0");//Assign last frame to a variable

					var new_width = width;//The picture assumes width of preceding frame if frame0 width

    					function move_animate(element, newParent){

        					var old_offset = element.offset();//Get current position of picture

						var oldz = element.css("z-index");//Get z index of current picture

        					element.appendTo(newParent);//Place picture in last frame

        					var new_offset = element.offset();//Get current position of picture

        					element.animate( {"top": new_offset.top, "left":new_offset.left, "width":new_width}, "fast", "easeInBack");


    					}//End move animate function

				}else{//Rest of the pics

					var pic = $(".picture").slice(i,i+1);//Assign current pic to a variable

					var frame = $("#frame"+(i+1));//Assign next frame to a variable

					var new_width = $("#frame"+(i+1)).width();//The picture assumes width of preceding frame 

    					function move_animate(element, newParent){

        					var old_offset = element.offset();//Get current position of picture

						var oldz = element.css("z-index");//Get z index of current picture

        					element.appendTo(newParent);//Place picture in last frame

        					var new_offset = element.offset();//Get current position of picture					
        							
        					element.animate( {'top': new_offset.top, 'left':new_offset.left, "width":new_width}, "fast", "easeInBack");


				}//End of for the rest of the pics other than pic0

           									        										
    				}//End move animate function						



				move_animate(pic,frame);//Do the animation





			}//End of for loop that loop through all pictures



		});//End pic back click function







	});//End document ready method



Post Reply