viewer.js图片查看器,动态添加图片不生效问题

2019-05-27  本文已影响0人  大梦无痕

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;设置一个无限大数字,同样可以达到你要的目的

上一篇 下一篇

猜你喜欢

热点阅读