jquery ui框多次

Question

我正在jquery ui对话框中显示多个图像。这里是一个单一的形象我的工作代码：

http://jsfiddle.net/pZMvf/

正如你可以看到上面的代码我有类userImage一个图像，它具有对此我存储图像宽度的原始宽度和高度的rel属性|高度和通过CSS我已经设置此图像大小为200px宽度和高度120px，因此，当用户点击图像，他得到全尺寸的图像。

现在我的问题是，我想添加多张图片这种方式有不同势大小的页面上，因此，例如这里是我的下一个HTML和我包括在页面多了一个形象：

<div class="userImg"> 
    <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" /> 
    <div class="dialog"></div> 
</div> 

<div class="userImg"><img class="userImage" src="http://i.imgur.com/83Fko.png" alt="" rel="510|274" /><div class="dialog"></div></div> 

例如用多张图片：http://jsfiddle.net/pZMvf/1/

现在我在页面上有2张图片，我的问题是在这里我不确定如何从单击图像的rel属性给出图像大小，因为它包含在点击功能之前，并且每个图像显示两次。

var getSizeFromRel = $(".userImage").attr('rel'); 
var size = getSizeFromRel.split('|'); 
var imgWidth = size[0]; 
var imgHeight = size[1]; 

谢谢你的帮助。 问候

Answer 1

坐落在img标签宽度/高度属性在.click()事件：

var img = $(this).attr("src"); 
var sizes = $(this).attr('rel').split('|'); 

$(dialog).prepend(
    $('<img />').attr({ 
     src: img, 
     width: sizes[0], 
     height: sizes[1] 
    }) 
); 

$(dialog).dialog('option', { 'width': sizes[0], 'height': sizes[1]}); 
$(dialog).dialog('open'); 

---

编辑征求意见与的AutoOpen：

设置autoOpen选项为true您的对话框将无法按预期工作，因为您的对话框在创建时为空，您只需点击图像即可填充内容。

你可以做的是获得“显示”查询字符串变量的值，如果这是真的，触发第一个图像上点击排序的“自动打开”对话框：

第一这里有一个函数提取查询字符串值（发现here）：

// extract a querystring value 
// key: the name of the qstring parameter 
// default_: a default value (optional) 
function getQuerystring(key, default_) 
{ 
    if (default_==null) default_=""; 
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)"); 
    var qs = regex.exec(window.location.href); 
    if(qs == null) 
     return default_; 
    else 
    return qs[1]; 
} 

设置autoOpen: false的对话框。

然后，在文档的末尾。准备好处理程序：

// get value of 'display' qstring param, default value is false (do not auto-open) 
if (getQuerystring('display', false)) { 
    $(".userImage:eq(0)").trigger('click'); 
} 

---

萨姆指出您的代码：

你不必像你这样做，以使该对话框的实例为每个图像，它打开两个对话框：

<div class="userImg"> 
    <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" /> 
    <div class="dialog"></div> 
</div> 

只有做出的对话框一个<div />你userImg之外，你会得到一个对话框，你改变了续耳鼻喉科反正：

<div class="dialog"></div> 

<div class="userImg"> 
    <img class="userImage" src="http://i.imgur.com/ad3ct.png" alt="" rel="610|374" /> 
</div> 

<div class="userImg"> 
    <img class="userImage" src="http://i.imgur.com/83Fko.png" alt="" rel="200|50" /> 
</div>