jquery - jQuery UI框多次

我正在使用jQuery UI对话框来显示多个图像。这是我对单个图像的工作代码：

http://jsfiddle.net/pZMvf/

如您在上面的代码中看到的，我有一个带有userImage类的图像，并且它具有rel属性，该属性存储图像宽度的原始宽度和高度| height，并且通过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];

感谢您的任何帮助。
问候

最佳答案

在.click()事件中的img标签上设置width / height属性：

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不能按预期方式工作，因为创建对话框时该对话框为空，单击图像即可填充内容。

您可以做的是获取'display'的querystring变量值，如果为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。

然后，在document.ready处理程序的末尾：

// 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>

AutoOpen

jquery - jQuery UI框多次