Question

I am loading images into a div, and then initiating a carousel to the the newly loaded images. Everything is working correctly, except I can’t get the script to get the image’s widths and set it.

This is what I currently have…

Get image size function

function imgSize() {
    $('img').each(function() {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        $(this).attr('height', imgHeight);
        $(this).attr('width', imgWidth);
    });
}

Load new page, call image size function, and carousel function

$('.menu a').live('click', function() {
        var id = $(this).attr('id');
        var page = id + '.html'
        $('#portfolio').load( page , function() {
            imgSize();
            $('#portfolio').carouFredSel(settings);
            $('#bodyFooter span').show();
        });
    });

You can see an example here: http://www.amandarecker.com/siteTest When you click on Beauty, all the images stack up on each other, or don’t even show up. When I am viewing the source with firebug, the width is set to 0. Why?

Hopefully someone can help… Thanks

Answer 1

i may be wrong but you are probably trying to get the images width too fast. ie the image hasnt loaded yet so its width is returning 0.

try adding load to your function.

function imgSize(){
    $("img").load(function(){
        var width = $(this).width();
        var height = $(this).height();
        $(this).attr("width",width).attr("height",height);
    });
}

this will only attempt to get the values once the images have fully loaded.