Need help animating a jquery carousel
Posted: Sun Apr 22, 2012 3:56 pm
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.
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