Question

有人会向我解释为什么我的对话只占中心的一部分时间吗？有时第一次对话框加载图像时它会向右移动，但是如果再次单击它，它会居中。有时图像将居中，我刷新页面，它偏离中心???

我有以下标记......

<div class="details">
<img id="photo1" class="photos opacity" src="images/photos/angledBuilding_sm.jpg" alt="photography" />
</div>

以及以下.js ......

$('.photos').click( function() {
var id = this.id;
var src = this.src;
var lrg = "_lg";
var sm = "_sm"
var title = 'This title';//create a separate function to set the title of the image.
var srcNew = src.replace(sm, lrg);
var $dialogImg = '<div><img src=' + srcNew + ' /></div>'
var $dialog = $($dialogImg)

.html($dialogImg)
.dialog({
autoOpen: true,
modal: true,
title: ' ' + title + ' ',
width: 'auto',
height: 'auto',
resizable: false,
draggable: false,
});

$dialog.dialog('open');
$(id).dialog('option', 'position', 'top center');
});

您可以在http://jameswadeweaver.com/portfolio.php

看到这一点

页面底部的摄影部分是我遇到问题的中心。

Answer 1

这不是一个集中的问题。这是一个尺寸问题。您在图像加载之前创建了对话框，因此它使用了一些基本尺寸框，它是居中的。但随后图像完成加载并溢出对话框容器。

我建议将加载事件处理程序添加到img标记中，在那里移动.dialog(...)代码。沿着这些方向的东西

$('.photos').click(function()
{
    $("<img/>")
        .on("load", function() { $("<div/>").append(this).dialog(...); })
        .prop("src", $(this).prop("src").replace("_sm", "_lg"));
});

或者你可以在窗口加载时将大图像预加载到隐藏的div中，然后就不会有这种延迟。

Answer 2

liho1eye已经涵盖了您的问题的根源并提供了合理的解决方案，但还有另一种可能性。

如果您知道大图像和小图像的尺寸，那么您可以将HTML更改为如下所示：

<img id="photo1"
    class="photos opacity"
    src="images/photos/angledBuilding_sm.jpg"
    alt="photography"
    width="281"
    height="161"
    data-lg-width="1123"
    data-lg-height="642" />

这些尺寸当然只是在这里编号。然后，您可以在显示之前读取数据属性以正确调整对话框的大小：

$('.photos').click( function() {
    var $this  = $(this);
    var id     = this.id;
    var src    = this.src;
    var width  = $this.data('lg-width');
    var height = $this.data('lg-height');

    //...

    var $dialog = $('<div>').append(
        $('<img>', {
            src: srcNew,
            width: width,
            height: height
        })
    );
    $dialog.dialog({
        //...
    });
    //...
});

然后在显示对话框时知道图像大小和对话框大小，并且对话框可以正确定位。

jquery对话框定位

2 个答案: