评论：强大的jQuery图片查看器插件Viewer.js  [查看原文]

window.addEventListener('DOMContentLoaded', function() {
    var galley = document.getElementById('galley');
    console.log(galley);
    viewer = new Viewer(galley, {
        url: 'data-original',
        toolbar: {
            prev: function() {
                viewer.prev(true);
            },

            next: function() {
                viewer.next(true);
            },
        },
        title: false,
        filter: function(image) {
            return $("img").hasClass('img_not_show');
        }
    });
});

我是这样写的，但实现不了，麻烦可以给一个实例吗

<div id="galley" class="msgflow">
    <img data-original='/img1.jpg' src='/img1.jpg' />
    <img data-original='/img2.jpg' src='/img2.jpg' />
    <img data-original='/img3.jpg' src='/img3.jpg' />
</div>

这是html

先调用jquery库

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

html设第一张不弹出

<div id="galley" class="msgflow">
    <img name="no" data-original='/img1.jpg' src='/img1.jpg' />
    <img data-original='/img2.jpg' src='/img2.jpg' />
    <img data-original='/img3.jpg' src='/img3.jpg' />
</div>

js

$("img").click(function(){
    if($(this).attr("name")=="no"){
     return false;
    }
});

测试没有问题。

0. 突然想起来怎么做了
1. 先声明一个函数，绑定属性为view-photo的dom

function Render_Viewer(){
      $('[view-photo]').viewer({
        zIndex : '20190101',
        url:    'src'
      })
  }

2. 开局可以先调用一次 Render_Viewer()
3. JS加载html之后再次调用 Render_Viewer()
4. dom的样式形如

<img src='https://****/xx.jpg' view-photo />

第一，下载文件里有index.html、index2.html..4个文件，用Dreamweaver或别的编辑器软件打开它。
第二，使用这个引用样式文件viewer.min.css,脚本文件viewer.min.js
第三，html代码写法，调用好图片路径

<ul id="jq22">    
	<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>

第四调用插件，脚本写法

<script>
    var viewer = new Viewer(document.getElementById('jq22'), {
        url: 'data-original'
    });
</script>

上面说明都很清楚了，如果这个看不明白的话，要好好补习一下基础知识了。