Question

$('.photoRow a[id^=clickPhoto]').click(function()
    {
        $('#layerBg').show();
        $(this).show();
        var id = parseInt($(this).attr('id').substr(10));

        var img = new Image();
        img.src = '/p/' + id + '.jpg';

        $('.photoWindow').fadeIn().html(img);        
        var pWidth = $(window).width();
        var pTop = $(window).scrollTop();
        var eWidth = $('.photoWindow').width();
        alert(eWidth);
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
    });

eWidth = 600 (default in css);
I need to make eWidth considered only after the image (img) loaded into the class .photoWindow

If my picrute in the cache that eWidth is correct.

If my picture has a width of 912, then the value eWidth should be 912, but not 600..

I hope you understand me.. Sorry for bad english!

Answer 1

If I understood your question, you want to evaluate eWidth only after the image is loaded.
First where is your image loaded and what is the element using the class photoWindow?

Supposing it’s on an img element. If that’s so you could use :

$('.photoWindow').load(function() {
        eWidth = $('.photoWindow').width();
        $('.photoWindow').css('top', pTop + 10 + 'px');
        $('.photoWindow').css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px');
        $('.photoWindow').show();
});

So whenever the <img> element is loaded you’ll calculate and place the image wherever you want.