灯箱2:如何通过JavaScript动态添加图片
作者:互联网
我在尝试动态添加图像时遇到了麻烦,因为lightbox2(由lokesh dakar创建)是在文档加载后由现有的html编码图像初始化的,并且第一次后不再解析该文档.
如果我尝试使用javascript添加新图像(例如,将它们添加到正文中),则不会将它们添加到lighbox组中.
官方网站上的文档似乎没有描述任何脚本化方法
有经验的人可以帮助我吗? 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)
});
})
解决方法:
经过几个小时的测试和阅读代码,我想到了这个神奇的代码:
//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是一个不需要处理的临时变量.
标签:lightbox,html,lightbox2,javascript,jquery 来源: https://codeday.me/bug/20191013/1905695.html