Problem with jQuery custom lightbox
Hi all. I'm writing my first jQuery script and it's my own lightbox plugin. I thought that it would be good idea to write something like that to learn how it works. Everything was good but i've got problem with 'next photo' and 'previous photo' options. When i click "next" or "previous" first time it works good. But every time i use it it's slower and slower. After 6-7 photo changes it takes more than 30 seconds to change photo. That's my functions for previous and next photo:
$.fn.previousPhoto = function(photos_array, j){
$(this).click(
function(){
$("#lightbox_photo").remove();
var k = j;
if(j == 0){
k = photos_array.length-1;
}
else{
k = j-1;
}
$.showPhoto(photos_array, k);
}
);
}
$.fn.nextPhoto = function(photos_array, j){
$(this).click(
function(){
$("#lightbox_photo").remove();
if(j == photos_array.length-1){
var k = 0;
}
else{
var k = j+1;
}
$.showPhoto(photos_array, k);
}
);
}
And that's my showPhoto function:
$.showPhoto = function(photos_array, i){
var photo_link = photos_array.eq(i);
var corrected_photo_link = photo_link.correctPhotoLink();
var photo_tag = "<img id='lightbox_photo' src='" + corrected_photo_link + "' />";
$("#previous_photo").after(photo_tag);
//pobranie wymiarow obrazka po jego zaladowaniu i wysrodkowanie zdjecia
$("#lightbox_photo").load(
function(){
var img_width = $("#lightbox_photo").width();
var img_height = $("#lightbox_photo").height();
$("#lightbox_container").css({
"top": "50%",
"left": "50%",
"margin-top": -(img_height/2 + 60),
"margin-left": -(img_width/2)
}).animate({"opacity": "1"}, 400, "linear");
$(".lightbox_link").css({
"height": img_height
});
}
);
$("#previous_photo").previousPhoto(photos_array, i);
$("#next_photo").nextPhoto(photos_array, i);
}
I have no idea what's wrong here, it's my first contact with jQuery and for me it looks all right but it doesn't work all right ;) I'll be very grateful for any help.