Implémentation de JavaScript pour prendre en charge les conseils sur les appareils mobiles gallery_javascript

Il s'agit d'un effet de galerie qui ne repose sur aucun framework js et est implémenté en javascript pur. Il prend en charge les opérations gestuelles des appareils mobiles, telles que le glissement tactile, le zoom avant et la fermeture des images, et il prend également en charge les opérations au clavier sur PC. En bref, il s'agit d'un plug-in de galerie d'images indispensable pour les développeurs WEB.

Les rendus d'affichage sont les suivants :

Voir la démo Télécharger le code source

HTML

Chargez d’abord les fichiers CSS et js requis.

<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> 

Ne vous inquiétez pas pour les fichiers ci-dessus, Moonlight a été packagé, vous pouvez simplement les télécharger et les utiliser.

Ensuite, préparez la partie HTML dans le corps. Nous préparons une vignette d'image sur la page. Lorsque vous cliquez sur cette vignette, le grand album correspondant apparaîtra. Nous sommes prêts

.

La structure HTML est la suivante :

<div id="photos"> 
 <img src="/static/imghwm/default1.png"  data-src="images/s1_m.jpg"  class="lazy" alt="Image description" /> 
 <p>图集</p> 
</div> 

Maintenant, la partie importante d'affichage de la galerie fournira la structure pour l'affichage de la grande image. Notez que les éléments du code suivant : .pswp__bg, .pswp__scroll-wrap, .pswp__container et .pswp__item ne peuvent pas être modifiés.

<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> 

La structure HTML ci-dessus définit le contenu, les outils, les boutons de direction, la description du titre et d'autres éléments affichés dans la galerie.

Javascript

Nous définissons la collection d'images de l'album en js (bien sûr, nous pouvons également définir la collection d'images dans la partie html comme demo2), définissons diverses options, puis appelons le plug-in photoSwipe en utilisant le nouveau 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; 

Vous pouvez appliquer ce plug-in aux projets mobiles. Pour plus de paramètres d'options, veuillez vous référer à l'adresse du projet PhotoSwipe : https://github.com/dimsemenov/photoswipe.

Le contenu ci-dessus est tout le contenu de l'implémentation javascript pour prendre en charge la galerie des appareils mobiles. J'espère qu'il vous plaira.