燈箱在訪問其他頁面後無法在動態加載的圖像上工作

以下是我正在嘗試執行的操作：我從我的數據庫動態加載（使用JSON和PHP）一些圖像到我的index.html頁面。當圖片被點擊時，它會在Lightbox中打開。我設法實現了它。現在，這是我的問題 - 如果我轉到另一個頁面，返回index.html並再次單擊圖像 - 它不起作用，圖像單獨打開。我該如何解決它？燈箱在訪問其他頁面後無法在動態加載的圖像上工作

下面是有關代碼：

的index.html：

$(function(){ 
    Shadowbox.init(); 
    $.getJSON("inc/API.php", {command:"top3"}, 
     function(result){ 
      for(var i = 0; i<result.length; i++) 
       $("<a href='images/"+result[i].imageFileName 
        +"' rel='shadowbox' title='"+result[i].imageHeader+"'><img width='200' height='200' src='images/"+result[i].imageFileName+"' /></a>").appendTo("#top3"); 
     }); 
});

API.php（它將請求從BusinessLogic.php查詢字符串）：

case "top3" : 
    echo getTop3(); 
    break;

BusinessLogic。 php：

function getTop3() 
    { 
     return json_encode(select("SELECT imageFileName, imageHeader, imageDescription FROM ranks JOIN images on images.imageID = ranks.imageID GROUP BY images.imageFileName ORDER BY AVG(rank) DESC LIMIT 3")); 
    }

非常感謝！

來源

2012-03-01 Igal

在插入到DOM中後，您需要將圖像的JavaScript與圖像綁定。我很驚訝這是第一次。

嘗試將Shadowbox.init()放入ajax回調函數中，在for循環之後。

$(function(){ 
    $.getJSON("inc/API.php", {command:"top3"}, function(result) { 
     for(var i = 0; i<result.length; i++) { 
      $("<a href='images/" + result[i].imageFileName + "' rel='shadowbox' title='" + result[i].imageHeader + "'><img width='200' height='200' src='images/" + result[i].imageFileName + "' /></a>").appendTo("#top3"); 
     } 
     Shadowbox.init(); 
    }); 
});

來源

2012-03-01 02:00:05 bhamlin

謝謝您的回覆！我嘗試了你的建議，它有點奏效 - 在我訪問另一個頁面並返回到index.html後，這個燈箱只對3個返回的第一個圖像起作用。 – Igal 2012-03-01 09:26:44

糟糕！我寫了「在for循環之後」，但隨後我的代碼將其放入for循環中。我糾正了它。 – bhamlin 2012-03-01 19:26:59

非常感謝你！這確實有訣竅，現在一切正常！再次謝謝你！ – Igal 2012-03-01 22:24:30

燈箱在訪問其他頁面後無法在動態加載的圖像上工作

回答

相關問題