CODEWITHSUNDEEP
jqueryloading
Isis
Isis

Reputation: 4666

jQuery Image loading

$('.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!

Upvotes: 0

Views: 800

Answers (2)

Michael Laffargue
Michael Laffargue

Reputation: 10314

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.

Upvotes: 2

Tom
Tom

Reputation: 15980

From your code, it looks as if you're attempting to pull the eWidth from the width of the photoWindow element. Why not grab it from the image itself?

eWidth = $('.photoWindow img').width();

I may also be missing something, but I'm unclear as to why you're performing a fadeIn() and a show() on the photoWindow - fadeIn() will display the element once it's completed firing.

You may also be able to refactor that final block of code operating on the photoWindow like this:

$('.photoWindow').css({
  top: pTop + 10 + 'px',
  left: parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
});

Upvotes: 0

Related Questions