PhotoSwipe plug-in can realize full-screen zoom in on the mobile phone, and then double-click on the image to zoom in on the image.
PhotoSwipe plugin official website/
Photoswipe's mobile terminal image enlarges and views, slides to switch to the next picture, and save the picture locally.
<style>
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav {background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}
/*Required Style*/
#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;
}
</style>
js code:
<script type="text/javascript">
var openPhotoSwipe = function() {
var pswpElement = ('.pswp')[0];
var items = [
{
src: 'images/',
w: 800,
h: 1142
},
{
src: 'images/',
w: 800,
h: 1142
},
{
src: 'images/',
w: 800,
h: 1142
},
{
src: 'images/',
w: 800,
h: 1142
},
{
src: 'images/',
w: 800,
h: 1142
}
];
var options = {
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
();
};
('photos').onclick = openPhotoSwipe;
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.