基于viewer.js图片预览

    
    
    
预览一张图片
 $(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 = $("
")
            items.last().after(cont);
            cont.append(items);
            var viewer = new Viewer(
                cont[0],
                {toolbar:false,backdrop:true}
            )
        })

//html

    
        
    

//css
    .am-gallery-item{
            position:relative;
        }

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