Pure JavaScript Gallery effect for mobile phone devices

This is a not dependent on any JS framework, pure JavaScript implementation of the gallery effect. It supports mobile device gesture operation, such as gesture touch sliding, zooming in and off pictures, it also supports keyboard operation on PC, in short it is a web developer indispensable picture Gallery plug-in, it is called Photoswipe.

Html

First load the required CSS and JS files.

<link rel= "stylesheet" href= "Css/photoswipe.css" >
<link rel= "stylesheet" href= "Css/default-skin/default-skin.css" >
<script src= "Js/photoswipe.min.js" ></script>
<script src= "Js/photoswipe-ui-default.min.js" ></script>

Please do not worry about the above documents, Moonlight Light is packed, you just download to use is.
Next, prepare the HTML part of the body. We prepare the thumbnail image in the page, when clicked this thumbnail, will pop up corresponding large atlas, we prepare the HTML structure as follows:

<div id= "Photos" >

<p> Atlas </p>
</div>

Now, the important Gallery showcase will provide a schema for the larger picture display, noting the elements in the following code:. PSWP__BG, Pswp__scroll-wrap,. Pswp__container and. Pswp__item These div cannot be changed.

<div class= "PSWP" tabindex= "-1" role= "dialog" aria-hidden= "true" >
<div class= "PSWP__BG" ></div>
<div class= "Pswp__scroll-wrap" >
<div class= "Pswp__container" >
<div class= "Pswp__item" ></div>
<div class= "Pswp__item" ></div>
<div class= "Pswp__item" ></div>
</div>

<div class= "pswp__ui Pswp__ui--hidden" >
<div class= "Pswp__top-bar" >
<div class= "Pswp__counter" ></div>
<button class= "Pswp__button pswp__button--close" title= "Close (ESC)" ></button>
<button class= "Pswp__button pswp__button--share" title= "Share" ></button>
<button class= "Pswp__button pswp__button--fs" title= "Toggle fullscreen" ></button>
<button class= "Pswp__button pswp__button--zoom" title= "Zoom In/out" ></button>
<div class= "Pswp__preloader" >
<div class= "PSWP__PRELOADER__ICN" >
<div class= "Pswp__preloader__cut" >
<div class= "Pswp__preloader__donut" ></div>
</div>
</div>
</div>
</div>

<div class= "Pswp__share-modal pswp__share-modal--hidden Pswp__single-tap" >
<div class= "Pswp__share-tooltip" ></div>
</div>
<button class= "Pswp__button pswp__button--arrow--left" title= "Previous (arrow left)" >
</button>
<button class= "Pswp__button pswp__button--arrow--right" title= "Next (arrow right)" >
</button>
<div class= "Pswp__caption" >
<div class= "Pswp__caption__center" ></div>
</div>
</div>
</div>
</div>

The above HTML structure defines elements such as the content, tools, direction buttons, caption descriptions, etc. of the gallery display.
Javascript

We define the Atlas picture set in JS (or, of course, define the picture set in the HTML section like Demo2), set various options, and then invoke the Photoswipe plug-in by using the new Photoswipe ().

var openphotoswipe = function () {
var pswpelement = Document.queryselectorall ('. Pswp ') [0];
Define a picture Collection
var items = [
{
SRC: ' images/s1.jpg ',
w:800,
h:1142
},
{
SRC: ' images/s2.jpg ',
w:800,
h:1142
}
];

var options = {
History:false,
Focus:false,

showanimationduration:0,
hideanimationduration:0

};

var gallery = new Photoswipe (pswpelement, Photoswipeui_default, items, options);
Gallery.init ();
};
Invoke Openphotoswipe when clicking on the Atlas element
document.getElementById (' photos '). onclick = Openphotoswipe;