jquery ui 框多次

Question

我正在研究 jquery ui 对话框来显示多个图像。这是我的单个图像的工作代码:

http://jsfiddle.net/pZMvf/

正如你在上面的代码中看到的，我有一个带有 userImage 类的图像，它有一个 rel 属性，我存储图像 width|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];

感谢您的帮助。问候

Answer 1

在.click()中的img标签上设置宽度/高度属性事件:

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对话框中的 true 选项将无法按预期工作，因为创建对话框时对话框是空的，您通过单击图像来填充内容。

您可以做的是获取'display'的查询字符串变量值，如果为真，则触发对第一张图像的点击以“自动打开”对话框:

首先，这是一个提取查询字符串值的函数(找到 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>