Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:43:25
original
1228 Les gens l'ont consulté

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> 
Copier après la connexion

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="images/s1_m.jpg" alt="Image description" /> 
 <p>图集</p> 
</div> 
Copier après la connexion

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> 
Copier après la connexion

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; 
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!