我在尝试时遇到困难动态添加图像, since 灯箱2（由 lokesh dakar）在文档加载后由现有的 html 编码图像进行初始化，并且在第一次之后不再解析文档。
如果我尝试使用 javascript 添加新图像（例如将它们附加到正文中），它们不会添加到 lightbox 组中。
官方网站的文档似乎没有描述任何脚本方法
有经验的人可以帮助我吗？解决方案与jquery真的很受欢迎，但我能应付得好vanilla js too.
代码示例：
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)
});
})
经过几个小时的测试和阅读代码后，我想出了这个神奇的代码：
//set album values
IMG = $('<a href="...">')
.attr('data-lightbox','roadtrip')
.append('<img src="...">')
//lightbox open:
IMG.click(function(){
lightbox.start($(this));
return false;
})
一些有用的提示：
不要设置数据$(...).data('lightbox','group')，因为 lightbox 使用选择器$('a[data-lightbox]')每次单击链接时。相反，你应该使用$(...).attr('lightbox','group').
lightbox.album是一个临时变量，您不需要处理。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
