Question

I am trying to load big size images from a listview with click on a preview thumbnail ..

The lightbox image should be centered. So long, so good..

Now i try to load the big images dynamically on click on the respective list row.

Theoretically no problem – i can generate the complete popup code dynamically or inject the img src with jquery to the existing popup code.

But now, the image size would not reconized correctly on the first click. The popup box is centered with zero size and expands to the right / bottom after the image content was loaded.

If i open the popup twice, it would positioned correctly! (maybe a caching issue?).

I tryed to preload the big size image on the fly and some other tweaks with no success.

simple jqm code of popup call with dynamic image source:

 $('#thumb').live('click', function() {
    var imgbig = "...";
    $("<img/>").attr("src",imgbig); // Even preloading not working
    $("#imgbig").attr("src",imgbig); // Img Tag in existing popup tag
    $("#imgPop").popup("open");
 });

I hope, any of you jqm experts has a solution for this issue. Thank you for every tip!

I made a Fiddle to show you an live example:
Dynamic image not centered on first click

Answer 1

Image is loading asynchronously. IMHO that’s what causing your problem. setTimeout can help you with that.

But, first of all, since you are opening popup programmatically you should change your link (button):

• ditch data-rel="popup"
• set href="#"

so it looks like:

<a href="#" id="thumb">Open image!</a>

Secondly change click handler:

$('#thumb').live('click', function() {
    var imgbig = "http://www.csunas.org/uploads/beautifull-grand-canyon.jpg";
    $("#imgbig").attr("src", imgbig);
    setTimeout(function(){
        $("#imgPop").popup("open");
    }, 100); 
    return false;
});

I’ve updated your jsFiddle