Question

I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it’s true sizes.

Currently, I have to manually create an array that includes the actual height of all images. For solving a design issue+less manual operation of my gallery, I need to get the actual height of an image, after I resized it (CSS).

I tried:

var imageheight = document.getElementById(imageid).height;

And:

var imageheight = $('#' + imageid).height();

But both return the 150px attribute assigned with the CSS. How can I solve this? Thanks

Answer 1

One way you could do it is create a separate image object.

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

That way, you’ll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.