Lightbox не работает с динамически загружаемыми изображениями после посещения других страниц - PullRequest
Новая
       3

Lightbox не работает с динамически загружаемыми изображениями после посещения других страниц

0 голосов
/ 01 марта 2012

Вот что я пытаюсь сделать: я загружаю динамически (с помощью 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"));
    }

Большое спасибо!

1 Ответ

1 голос
/ 01 марта 2012

Вам необходимо привязать свой JavaScript-код лайтбокса к изображениям после их вставки в DOM.Я удивлен, что это работает в первый раз.

Попробуйте поместить 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();
     });
});
...