Question

这是我正在尝试做的事情：我正在动态地（使用JSON和php）将一些图像从我的数据库加载到我的index.html页面。单击图像后，它将在灯箱中打开。我设法实现了它。现在这是我的问题 - 如果我转到另一个页面，返回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"));
    }

非常感谢！

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

访问其他页面后，Lightbox无法处理动态加载的图像

1 个答案: