JavaScript implementation to support mobile device gallery_javascript tips

This is a gallery effect that does not rely on any js framework and is implemented in pure javascript. It supports mobile device gesture operations, such as gesture touch sliding, zooming in and closing pictures, and it also supports keyboard operations on PC. In short, it is an indispensable picture gallery plug-in for WEB developers. It is called photoswipe.

The display renderings are 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> 
<script src="js/photoswipe-ui-default.min.js"></script> 

Don’t worry about the above files, Moonlight has been packaged, you can just download and use them.

Next, prepare the HTML part in the body. We prepare a picture thumbnail on the page. When this thumbnail is clicked, the corresponding large album will pop up. We are ready

HTML structure is as follows:

<div id="photos"> 
 <img src="images/s1_m.jpg" alt="Image description" /> 
 <p>图集</p> 
</div> 

Now, the important gallery display part will provide the structure for the large image display. Note that the elements in the following code: .pswp__bg, .pswp__scroll-wrap, .pswp__container and .pswp__item 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 the content, tools, direction buttons, title description and other elements displayed in the gallery.

Javascript

We define the album picture collection in js (of course, we can also define the picture collection in the html part like demo2), set various options, and then call the photoSwipe plug-in by using new PhotoSwipe().

var openPhotoSwipe = function() { 
 var pswpElement = document.querySelectorAll('.pswp')[0]; 
 //定义图片集合 
 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(); 
}; 


//点击图集元素时触发调用openPhotoSwipe 

document.getElementById('photos').onclick = openPhotoSwipe; 

You can apply this plug-in to mobile projects. For more option settings, please refer to the PhotoSwipe project address: <https://github.com/dimsemenov/photoswipe.

The above content is all the content of javascript implementation to support mobile device gallery. I hope you like it.