美文网首页
viewer.js图片查看器,动态添加图片不生效问题

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

作者: 大梦无痕 | 来源:发表于2019-05-27 16:23 被阅读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;设置一个无限大数字,同样可以达到你要的目的

相关文章

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

    viewer.js图片查看器,动态添加图片不生效问题 js 实例化 动态添加 当然你还可以这样写,在实例化成功之后...

  • viewer.js

    Viewer.js[https://github.com/fengyuanchen/viewerjs] 图片查看器...

  • 01 图片轮播制作步骤

    方法一:动态面板+选项组 步骤一:添加图片部件,双击部件,添加图片,转图片部件为动态面板,命名为【相册】。如图:

  • IOS 为多层图片添加点击事件

    在图片上添加了图片,点击事件没有生效 最后发现是 图片底部的图片,也需要设置 有了这句之后,搞定

  • 记录uniapp实现阿里云一键登录功能要点

    图片/视频素材不显示 遇到过设置了static图片,在调试时不生效的问题。需要重新生成自定义基座包,安装后,即可生效

  • Vue中使用viewer.js图片查看器

    插件安装 插件引入 html部分 调用插件 键盘事件 仅在modal mode下可用ESC 键: 退出全屏/关闭/...

  • iOS 点击看大图

    SDPhotoBrowser图片查看器的简单使用

  • vue内联绑定背景图片

    遇到一个问题: 动态请求回来一个背景图片,然后用内联样式写上去,但是设置的背景大小的样式不生效。---html j...

  • 应用问题处理

    windows7照片查看器打开图片速度慢 解决win7照片查看器速度慢的方法 win7系统自带图片查看器打开照片慢...

  • html中如何让图片翻转

    前言   上个帖子《html如何给图片添加动态的文字说明》分享了如何给图片添加动态的文字说明,今天想给大家分享一下...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/rmihtctx.html