JavaScript implementation Support mobile device Gallery _javascript Tips

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.

The display effect chart is as follows:

View Demo Download source code

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> 

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 is as follows:

<div id= "Photos" > 
  
 <p> Atlas </p> 

Now, the important Gallery section will provide a schema for the large illustration 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 CLA ss= "pswp__ui Pswp__ui--hidden" > <div class= "Pswp__top-bar" > <div class= "Pswp__counter" ></div&gt 
    ; <button class= "Pswp__button pswp__button--close title=" Close (ESC) "></button> <button class=" Pswp__b Utton 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> &LT;/DIV&G 
   T </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=" Pre Vious (arrow left) "> </button> <button class=" Pswp__button pswp__button--arrow--right "title=" Next (AR Row right) "> </button> <div class=" pswp__caption "> <div class=" Pswp__caption__center "&GT;&L  t;/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 the collection 
 of pictures 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< c21/>}; 
 var gallery = new Photoswipe (pswpelement, Photoswipeui_default, items, options); 
 Gallery.init (); 
}; 


Invoke Openphotoswipe when clicking on the Atlas element 

You can apply the plug-in to the mobile project, more options set please refer to the Photoswipe Project address:

The above content is the JavaScript realization supports the mobile device gallery The entire content, hoped that everybody likes.