viewer.js图片查看器,动态添加图片不生效问题
<ul id="dowebok">
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
</ul>
<button id="btn">添加</button>
js 实例化
var viewer = new Viewer(document.getElementById('dowebok'), {
url: 'src'
});
动态添加
$("#btn").on("click",function(){
var li = $('<li><img data-original="img/q.jpg" src="img/q.jpg"></li>');
li.appendTo("#dowebok");
viewer.length = $("#dowebok img").length ;//这里就是动态添加可以查看的设置
})
当然你还可以这样写,在实例化成功之后设置 viewer.length = 9999999999999;设置一个无限大数字,同样可以达到你要的目的
网友评论