使用swiper实现图片预览效果
<div class="swiper-container" id="zoomSwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="padding-bottom: 2px;">
<div class="swiper-zoom-container">
<img src="{{$img['picturePath']}}" width="100%">
</div>
</div>
</div>
</div>
$(function(){
var mySwiper = new Swiper('#zoomSwiper1', {
lazy: true,
observer:true,
observeParents:true,
centeredSlides:true,
minRatio:0,
on: {
click: function(e){
if(this.$el.hasClass('active')){
this.$el.removeClass("active");
this.zoom.out();
this.zoom.disable();
}else{
this.$el.addClass("active");
this.zoom.enable();
}
}
}
})
})
width: 100%;
}
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
width: 100%;
height: auto;
min-height: auto;
}
height: 100%;
background:
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
}
width: 100%;
height: auto;
min-height: auto;
}
width: 100%;
height:auto;
}