为什么前两个图像在jquery中加载不正确

Question

我知道我的问题非常复杂，我真的希望有人能帮助我。我创建了一个图像库qih jQuery和PHP。首先，我从MySql数据库中获取所有图像名称，然后从服务器文件夹中取出它们并使用php调整它们的大小。它创建缩略图，然后我创建了一个jQuery的弹出窗口，它显示大图像。之后，我放置一个上一个和下一个按钮，并告诉jquery从php获取图像结果数组，并使用json将它们回显到jquery中。然后它通过数组创建下一个和上一个效果。然后，我在点击下一个和上一个按钮时将每个图像居中。当您加载第一张和第二张照片时，它不居中，并且向右移动。我无法弄清楚为什么会发生这种情况。我真的需要一些帮助。有太多的代码发布在这里，所以我给你的网站，你可以在源代码中看到几乎所有东西。请记住，我使用PHP，所以如果你想知道它是如何迭代通过图片为什么。谢谢，如果任何人都可以帮助我。

http://www.oceanphotostudio.com/test/collection/before-and-after.php

Answer 1

你的描述完全overcomplicates问题。浏览器可以不关心你如何生成阵列或服务器上的HTML，或者它是什么语言

你的位置问题是一个简单的CSS问题。您已将弹出窗口的top和left设置为50％。这意味着弹出窗口的左上角将从页面的死亡中心开始，并从那里向下和向下移动。

使用浏览器控制台检查适用于它们的html元素和css规则并进行相应调整。在控制台中，您可以进行实时编辑，以实时查看调整的影响

Answer 2

它得到偏移的原因是在加载图像之前计算弹出窗口div的中心边距。请注意，在第一次点击时，它将具有-37px和-30px的边距。加载一张图片后，调用另一张图片将使用加载的最后一张图片的宽度和高度，这就是为什么你可以得到不可预知的结果。

查看JQuery's load event handler以获取有关如何在图像设置为加载后创建调整大小的回调的信息，而不是之前。