jQuery Mobile的 - 列表视图弹出图像 - >未居中首先点击

我想从一个列表视图装载大尺寸的图像与点击预览缩略图..jQuery Mobile的 - 列表视图弹出图像 - >未居中首先点击

灯箱图像应居中。这么长，那么好..

现在我尝试点击相应的列表行动态加载大图像。

理论上没有问题 - 我可以动态生成完整的弹出窗口代码或者将jQuery的img src注入到现有的弹出窗口代码中。

但现在，图像大小在第一次点击时无法正确重构。弹出框以零大小居中并在图像内容加载后展开到右侧/底部。

如果我打开两次弹出窗口，它将正确定位！（也许是一个缓存问题？）。

我尝试预先载入大尺寸图像和其他一些没有成功的调整。与动态图像源弹出呼叫

简单JQM代码：

$('#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"); 
});

我希望，你们中的任何JQM专家对这个问题的解决方案。谢谢你的每一个提示！

我做了一个小提琴向您展示一个活生生的例子： Dynamic image not centered on first click

来源

2013-01-08 metamagicson

图片加载异步。恕我直言，这是什么导致你的问题。 setTimeout可以帮助你。

但是，首先，因为您要打开弹出式编程，你应该改变你的链接（按钮）：

沟data-rel="popup"
设置href="#"

所以它看起来像：

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

其次更改点击处理程序：

$('#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; 
});

我已经更新了你的jsFiddle

来源

2013-01-09 00:33:43 peterm

非常感谢。加载了异步映像的提示是我解决方案的关键。 – metamagicson

谢谢peterm，

我这样做，所以现在：

var img = new Image(); 
$(img).bind('load', function(e) { 
    $("#imgbig").attr("src",imgbig); 
    $.mobile.hidePageLoadingMsg(); // Hide spinner 
    $("#imgPop").popup("open"); 
}); 
img.src = imgbig; 
$.mobile.showPageLoadingMsg(); // Show spinner until image is loaded

图像将现在intiating的popup.open其间的前加载加载方法。

来源

2013-01-09 16:11:19 metamagicson

jQuery Mobile的 - 列表视图弹出图像 - >未居中首先点击

回答

相关问题