基于viewer.js图片预览

    <script type="text/javascript" src="/mobile/templates/default/js/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/viewerjs/1.1.0/viewer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/viewerjs/1.1.0/viewer.min.js"></script>
预览一张图片
 $(function(){
            $(".am-gallery-item a").attr("href","javascript:;")

            $(".am-gallery-item").on("click touchmove touchend",function(e){
                var d = $(this).data();

                if(!d.viewer){
                    d.viewer = new Viewer($("img",this)[0], {toolbar:false,backdrop:true})
                }


                if(e.type=="touchmove"){
                    d.moved = true;
                    setTimeout(function(){
                        d.moved = false;
                    },500)
                }


                if(!d.moved && e.type=="touchend"){
                    d.viewer.show();
                }

                if(e.type=="click"){
                    d.viewer.show();
                }

            })
        })

//多张图片轮播预览
      $(function(){
            $(".am-gallery-item a").attr("href","javascript:;");
            var items = $(".am-gallery-item");
            items.each(function(index,el){
                var item = $(this);
                item.parent().after(item).remove();
                var d = {};
                item.on("click touchmove touchend",function(e){
                    if(e.type=="touchmove"){
                        d.moved = true;
                        setTimeout(function(){
                            d.moved = false;
                        },500)
                    }

                    if((!d.moved && e.type=="touchend") || e.type=="click"){
                        viewer.view(index);
                    }
                })

            })

            var cont = $("<div></div>")
            items.last().after(cont);
            cont.append(items);
            var viewer = new Viewer(
                cont[0],
                {toolbar:false,backdrop:true}
            )
        })

//html
<div class="am-gallery-item">
    <a href="" class="">
        <img src="" style="width: 100%;"/>
    </a>
</div>
//css
    .am-gallery-item{
            position:relative;
        }

        .am-gallery-item:before{
            content:"";
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index: 5;
        }