Home>

This article uses pure javascript technology to support mobile device galleries.Support mobile device gesture operation,Interested friends to study together

This is a gallery effect implemented in pure javascript without relying on any js framework.It supports mobile device gestures,Such as gestures to swipe, zoom in and out,It also supports keyboard operation on the pc,In short, it is an indispensable picture gallery plugin for web developers.It's 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>

Don't worry about the above documents,Moonlight is packed.Just download and use it.

Next, prepare the html part in the body. We prepare image thumbnails on the page,When clicking on this thumbnail,The corresponding large atlas will pop up,We prepare

The html structure is as follows:

<div>
 <img src="images/s1_m.jpg" />
 <p>Atlas</p>
</div>

Now, the important gallery display section will provide the structure for the big picture display,Note the elements in the following code:.pswp__bg, .pswp__scroll-wrap, .pswp__container and .pswp__item cannot be changed.

<div tabindex="-1" role="dialog" aria-hidden="true">
 <div></div>
 <div>
  <div>
   <div></div>
   <div></div>
   <div></div>
  </div>
  <div>
   <div>
    <div></div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <div>
     <div>
      <div>
      <div></div>
      </div>
     </div>
    </div>
   </div>
   <div>
    <div></div>
   </div>
   <button>
   </button>
   <button>
   </button>
   <div>
    <div></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 atlas image collection in js (of course, you can also define the image collection in the html section like demo2), set various options,Then call photoswipe by using new photoswipe ().

var openphotoswipe=function () {
 var pswpelement=document.queryselectorall (". pswp") [0];
 //define 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 ();
};
//Trigger the call to openphotoswipe when the atlas element is clicked
document.getelementbyid ("photos"). onclick=openphotoswipe;

The above is all the content of javascript to support mobile device galleries.Hope you like it.

  • Previous C # reflection (Reflection) use analysis
  • Next Analysis of multiple methods of passing values ​​between C # Winform windows