Pelaksanaan JavaScript untuk menyokong petua galeri_javascript peranti mudah alih

Ini ialah kesan galeri yang tidak bergantung pada mana-mana rangka kerja js dan dilaksanakan dalam javascript tulen. Ia menyokong operasi gerak isyarat peranti mudah alih, seperti gelongsor sentuhan gerak isyarat, mengezum masuk dan menutup gambar, dan ia juga menyokong operasi papan kekunci pada PC Secara ringkasnya, ia adalah pemalam galeri gambar yang sangat diperlukan untuk pembangun WEB.

Penyampaian paparan adalah seperti berikut:

Lihat demo Muat turun kod sumber

HTML

Mula-mula muatkan fail CSS dan js yang diperlukan.

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

Jangan risau tentang fail di atas, Moonlight telah dibungkus, anda hanya boleh memuat turun dan menggunakannya.

Seterusnya, sediakan bahagian HTML dalam badan. Kami menyediakan lakaran kecil gambar pada halaman Apabila lakaran kecil ini diklik, album besar yang sepadan akan muncul Kami sedia

Struktur HTML adalah seperti berikut:

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

Kini, bahagian paparan galeri yang penting akan menyediakan struktur untuk paparan imej besar Ambil perhatian bahawa elemen dalam kod berikut: .pswp__bg, .pswp__scroll-wrap, .pswp__container dan .pswp__item tidak boleh diubah.

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

Struktur HTML di atas mentakrifkan kandungan, alatan, butang arah, penerangan tajuk dan elemen lain yang dipaparkan dalam galeri.

Javascript

Kami mentakrifkan koleksi gambar album dalam js (sudah tentu, kami juga boleh menentukan koleksi gambar dalam bahagian html seperti demo2), menetapkan pelbagai pilihan, dan kemudian memanggil pemalam photoSwipe dengan menggunakan PhotoSwipe() baharu.

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; 

Anda boleh menggunakan pemalam ini pada projek mudah alih Untuk lebih banyak tetapan pilihan, sila rujuk alamat projek PhotoSwipe: <https://github.com/dimsemenov/photoswipe.

Kandungan di atas adalah semua kandungan pelaksanaan javascript untuk menyokong galeri peranti mudah alih saya harap anda menyukainya.