JavaScript-Implementierung zur Unterstützung mobiler Geräte gallery_javascript-Tipps

Dies ist ein Galerieeffekt, der nicht auf einem JS-Framework basiert und in reinem Javascript implementiert ist. Es unterstützt Gestenoperationen auf mobilen Geräten, wie z. B. das Vergrößern und Schließen von Bildern, und es unterstützt auch Tastaturoperationen auf dem PC. Kurz gesagt, es ist ein unverzichtbares Bildergalerie-Plug-in für WEB-Entwickler.

Die Anzeigedarstellungen sind wie folgt:

Demo ansehen Quellcode herunterladen

HTML

Laden Sie zunächst die erforderlichen CSS- und JS-Dateien.

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

Machen Sie sich wegen der oben genannten Dateien keine Sorgen, Moonlight wurde gepackt, Sie können sie einfach herunterladen und verwenden.

Als nächstes bereiten Sie den HTML-Teil im Textkörper vor. Wir bereiten ein Miniaturbild auf der Seite vor. Wenn Sie auf dieses Miniaturbild klicken, wird das entsprechende große Album angezeigt. Wir sind bereit

HTML-Struktur ist wie folgt:

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

Jetzt stellt der wichtige Galerie-Anzeigeteil die Struktur für die große Bildanzeige bereit. Beachten Sie, dass die Elemente im folgenden Code: .pswp__bg, .pswp__scroll-wrap, .pswp__container und .pswp__item nicht geändert werden können.

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

Die obige HTML-Struktur definiert den Inhalt, die Werkzeuge, die Richtungsschaltflächen, die Titelbeschreibung und andere in der Galerie angezeigte Elemente.

Javascript

Wir definieren die Album-Bildersammlung in js (natürlich können wir die Bildersammlung auch im HTML-Teil wie Demo2 definieren), legen verschiedene Optionen fest und rufen dann das PhotoSwipe-Plug-In mit new PhotoSwipe() auf.

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; 

Sie können dieses Plug-in auf mobile Projekte anwenden. Weitere Optionseinstellungen finden Sie unter der PhotoSwipe-Projektadresse: <https://github.com/dimsemenov/photoswipe.

Der obige Inhalt ist der gesamte Inhalt der Javascript-Implementierung zur Unterstützung der Galerie für mobile Geräte. Ich hoffe, er gefällt Ihnen.