<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;
}
网友评论