лайтбокс 2: как динамически добавлять изображения через JavaScript
У меня проблемы с попыткойдинамически добавлять изображения, посколькуLightbox2 (lokesh dakar) инициализируется после загрузки документа существующими html-кодированными изображениями и больше не анализирует документ после первого раза.
Если я пытаюсь добавить новые изображения с помощью javascript (например, добавляя их в тело), они не добавляются в группы лайтбоксов.
Документация на официальном сайте не описывает какой-либо сценарий
Кто-нибудь с опытом может мне помочь? решение сJQuery действительно приветствуются, но я могу справиться хорошованиль JS тоже.
Пример кода:
HTML
<body>
<div id="container">
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
</div>
<!-- where 'Image #X' = <img src="images/thumb/image-X.jpg>" -->
<div id="loadmore">load more images</div>
<script src="path/to/lightbox.js"></script>
<script>
/* see below for the script */
</script>
</body>
Javascript
$(function(){
$('#loadmore').click(function(){
//ajax request for more images.
//load them with all the needed properties...
//then put them into the container:
var IMG = $('<a href="images/image-10.jpg" data-lightbox="roadtrip">'+
'<img src="images/small/image-10.jpg">'+
'</a>');
//magic here... add IMG to roadtrip lightbox group!!!
//probably something like lightbox.groups['roadtrip'].add(IMG)
//but i'm only speculating
$('#container').append(IMG)
});
})