PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能
PhotoSwipe插件官方网站 nofollow" target="_blank" href="http://www.photoswipe.com/">http://www.photoswipe.com/
图片放大查看，滑动切换下一张，图片保存到本地。
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav a.cur{background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}
/必要样式/
photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}
photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
js代码：
var items = [
{
src: 'images/s1.jpg',w: 800,h: 1142
},{
src: 'images/s2.jpg',{
src: 'images/s3.jpg',{
src: 'images/s4.jpg',{
src: 'images/s5.jpg',h: 1142
}
];
原文链接：https://www.f2er.com/js/46313.html{
src: 'images/s1.jpg',w: 800,h: 1142
},{
src: 'images/s2.jpg',{
src: 'images/s3.jpg',{
src: 'images/s4.jpg',{
src: 'images/s5.jpg',h: 1142
}
];
var options = {
history: false,focus: false,showAnimationDuration: 0,hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement,PhotoSwipeUI_Default,items,options);
gallery.init();
};
document.getElementById('photos').onclick = openPhotoSwipe;
