爲什麼前兩個圖像在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以獲取有關如何在圖像設置爲加載後創建調整大小的回調的信息，而不是之前。