他のページを訪問した後、Lightboxが動的に読み込まれたイメージで動作しない

Question

ここで私がやろうとしていることは次のとおりです： 私のDBからindex.htmlページに動的に（JSONとphpで）画像をクリックすると、ライトボックスに表示されます。私はそれを達成することができました。ここに私の問題があります - 私は別のページに行って、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; 

ビジネスロジックここ

は、関連するコードです。 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")); 
    } 

ありがとう！

Answer 1

DOMに画像を挿入した後、ライトボックスのJavaScriptを画像にバインドする必要があります。私はそれが初めて動作するのに驚いています。

forループの後に、Shadowbox.init()をajaxコールバックに入れてみてください。

$(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(); 
    }); 
});