Question

I am building a gallery at the moment. When a thumbnail is clicked, the full-size version of that image is shown in a div. All images have the same width, but not the same height. To avoid any jumps I’ve written the script in a way that the height of the container is animated to fit the new height.

The code:

$(document).ready(function() {
    var thumb = $(".thumb");
    var bigImage = $("#big-image").find("img");
    var bigImageContainer = $("#big-image");

    thumb.click(function(e){
        var hrefToFull = $(this).find("a").attr("href"); // getting the fullsize link of clicked thumb
        var bigSrc = bigImage.attr("src"); // src of current big image
        var oldHeight = bigImage.height();

        e.preventDefault();

        bigImageContainer.css("height", oldHeight); // height = height of current img

        bigImage.fadeOut(500, function(){ // fading the image out
            bigImage.attr("src", hrefToFull); // changing src

            bigImage.load(function() { // when new image is loaded
                var newHeight = bigImage.height(); // height = height of new img
                bigImageContainer.animate({height:newHeight}, 600); // animate height
                bigImage.fadeIn(500); // fading it in again
            })
        });
    });
});

What it is supposed to do:

At first I set some variables, like the divcontaining the big image and the big image itself. When a thumb is clicked, I get the URL/src to the new big image and the URL/src of the current big image. I also assign a variable that hold the height of the current big image. Then I set the height of the container to the height of the current image, although I am not sure if this is really needed.

Then, the old image is faded out and it’s source is replaced with the src of the new image. When the new image is loaded, I assign it’s height to a variable and tell that the height of the parent div should be animated to match that height. After all this, I fade in the new image.

What it does:

Actually, it works. But sometimes, the animation just stops working. This results in either the big image overlapping the thumbs or way to much space below the big image. So my guess is that something is wrong either with the animation speed or with load.

Do you see anything that’s not right with this code? What could cause the buggy animation?

Answer 1

This may be due to your browser caching the big image, if the image is cached then the .load function is not always called. (I believe it depends on the browser as to whether it decides to call it or not)

I tend to get around this sort of issue by doing the following

Instead of code like this:

img.load(function() {
    //do some stuff once image loaded
});

I do the following:

function doStuffToImage() {
    //do stuff to image
}

img.load(function() {
    doStuffToImage();
});

if(img.width() != 0)
    doStuffToImage();

Since .load() is asynchronous you may find that in certain browsers doStuffToImage gets called twice (once because of the if statement and once because some browsers always call .load even on cached images) in which case you may need to add a boolean flag to determine if the image has been dealt with or not.