lightbox2:如何通过javascript动态添加图像
lightbox 2: how to add dynamically images via javascript
我在尝试动态添加图像时遇到了问题,因为lightbox2(由lokesh dakar创建)在文档加载后由现有的html编码图像初始化,并且在第一次加载后不再解析文档。
如果我尝试使用javascript添加新图像(例如,将它们附加在正文中),它们不会添加到lighbox组中。
官方网站中的文档似乎没有描述任何脚本化的方法
有经验的人可以帮我吗?使用jquery的解决方案非常受欢迎,但我也能很好地处理vanillajs。
代码示例:
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
是一个不需要处理的临时变量。
要添加现有img标记以单独进行灯箱化(不带库功能),可以使用以下内容:
$('img')
.wrap(function(index) {
return '<a href="'+$(this).attr('src')+'" data-lightbox="image-'+index+'"></a>';
});
只需在插入lightbox.js 之前添加即可
我晚了几年才找到解决方案,但希望它能在未来帮助其他人。
添加图像后,您可以通过调用lightbox.init()
重新初始化Lightbox。
例如:
var src = "https://via.placeholder.com/150"
$(`#photo-container`)
.append(`
<a href="${src}" data-lightbox="album">
<img src="${src}" width="100">
</a>
`);
lightbox.init();
确保在脚本前包含lightbox和jQuery
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- 如何使用Angular动态添加iframe-src
- 如何向JSON数组动态添加属性
- 动态添加通过json创建的选择项
- 使用jQuery根据动态生成的html动态添加html
- 使用.on动态添加jquery/js不知道的html元素
- JS动态添加字段-删除按钮不起作用
- 动态添加AngularJS脚本
- 将表行动态添加到表或tbody元素中
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 将特定属性动态添加到元素中
- 在highcharts.js中向点弹出窗口动态添加文本
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- 使用jQuery动态添加onClick事件
- 如何在Opencart中动态添加JavaScript
- 剑道UI下载列表:如何动态添加新元素
- 动态添加复选框和输入框 jQuery
- 动态添加哈希标记;t工作
- 将图表动态添加到组合高图表中