谏知中文网

使用viewer插件选择器定位到img元素的父级，这样预览时可以左右切换查看同级图片

如果图片元素块包含其他操作，比如“设置封面”、“删除”等需要做下元素过滤

看下元素结构

<div class="img mb10" id="view_img">
    <a class="parent_img" href="javascript:;" target="_self">    
        <img src="5e952486ca2a0.JPG" class="imgs" data-original="5e952486ca2a0.JPG" width="120" height="120" />    
        <label class="act flex">    
            <span><img class="cover" src="/static/images/cover.png" title="设置封面" data-type="1" /></span>    
            <span><img class="del" src="/static/images/del.png" title="删除" data-type="2" /></span>    
        </label>    
    </a>    
    <!-- 相同结构 -->
    **   
    <a class="btn-file" href="javascript:;" target="_self">    
        <label>    
            <form method="post" enctype="multipart/form-data" id="change-thumb">    
                <input type="file" name="upfile"/>    
                <input type="hidden" name="id" value="1"/>    
                <input type="hidden" name="action" value="uploadimage"/>    
            </form>    
        </label>    
        <img src="/static/images/upload-arrow.png" width="120" height="120" class="upload"/>    
    </a>    
</div>

将cover、del元素过滤，追加元素时更新查看器实例，JS版本：

<script src="/static/viewer/js/viewer.min.js"></script>    
<script>    
var selector = document.getElementById('view_img'),    
options = {    
    url: 'data-original',    
    toolbar: !0,    
    navbar: !0,    
    title: !0,    
    minZoomRatio: 0.2,    
    maxZoomRatio: 2,    
    filter(selector) {    
        // 选择器过滤
        return selector.className == 'imgs' ? true : false;    
    }    
};    
var handle = new Viewer(selector, options);    
$(".btn-file label").change(function () {    
      // 追加元素    
      /* Tips：将追加元素更新到查看器实例 */    
      handle.update();       
});    
$('.img').on('click', '.cover,.del', function () {
    // 其他操作
})

jQuery版本

<script src="/static/viewer/js/viewer.min.js"></script> 
<script src="/static/viewer/js/jquery-viewer.min.js"></script>    
<script>    
var selector = $('#view_img'),    
options = {    
    url: 'data-original',    
    toolbar: !0,    
    navbar: !0,    
    title: !0,    
    minZoomRatio: 0.2,    
    maxZoomRatio: 2,    
    filter(selector) {    
        // 选择器过滤
        return selector.className == 'imgs' ? true : false;    
    }    
};    
selector.viewer(options);  
$(".btn-file label").change(function () {    
      // 追加元素    
      /* Tips：将追加元素更新到查看器实例 */    
      selector.viewer('update');    
});

点击查看更多用法：

https://github.com/fengyuanchen/viewer

https://github.com/fengyuanchen/jquery-viewer