Penjelasan terperinci tentang penggunaan lightbox.js-tutorial js-php.cn

Penjelasan terperinci tentang penggunaan lightbox.js

DDD

Lepaskan： 2023-06-27 15:46:13

asal

2256 orang telah melayarinya

Penjelasan terperinci tentang penggunaan lightbox.js

lightbox.js ialah pemalam JavaScript yang biasa digunakan, digunakan untuk memaparkan kesan penyemakan imbas imej, video atau kandungan web pada halaman web. Ia menyediakan cara yang mudah tetapi elegan untuk penonton mengklik pada lakaran kecil atau butang untuk membuka modal yang memaparkan imej atau media bersaiz penuh. Dalam artikel ini, kami akan memperkenalkan penggunaan lightbox.js secara terperinci.

Muat turun dan perkenalkan lightbox.js

Untuk menggunakan lightbox.js, anda perlu memuat turun versi terbaharu pemalam dari tapak web rasmi terlebih dahulu. Setelah muat turun selesai, salin fail pemalam ke dalam folder JavaScript projek anda. Kemudian, gunakan teg untuk memperkenalkan fail lightbox.js di bahagian kepala atau skrip dokumen HTML.

<script src="path-to-js/lightbox.js"></script>

Salin selepas log masuk

Buat lakaran kecil imej

Untuk menggunakan lightbox.js, anda perlu membuat lakaran kecil imej dalam dokumen HTML anda. Lazimnya, lakaran kecil imej dibalut menggunakan teg dan atribut hrefnya menghala ke URL imej bersaiz penuh. Selain itu, anda juga perlu menambah atribut data untuk menentukan pencetus lightbox.js.

<a href="path-to-images/image.jpg" data-lightbox="gallery"> <!-- 图像缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

Salin selepas log masuk

Dalam contoh di atas, atribut peti cahaya data ditetapkan kepada "galeri", yang bermaksud imej akan dipaparkan dalam galeri yang sama dan imej boleh ditukar dengan anak panah kiri dan kanan.

Inisialisasi lightbox.js melalui JavaScript

Setelah lakaran kecil imej dibuat, anda boleh memulakan lightbox.js melalui JavaScript. Semua lakaran kenit imej dengan atribut peti cahaya data boleh ditemui dan dimulakan menggunakan kod berikut:

lightbox.option({
  &#39;resizeDuration&#39;: 200,
  &#39;wrapAround&#39;: true
})

Salin selepas log masuk

Dalam kod di atas, kami menetapkan beberapa pilihan melalui kaedah lightbox.option(). Pilihan resizeDuration menentukan masa (dalam milisaat) yang diperlukan untuk imej berubah dari satu saiz ke saiz yang lain. Pilihan wrapAround digunakan untuk menentukan sama ada untuk mendayakan penyemakan imbas gelung.

Pilihan Konfigurasi Tersuai

Selain daripada pilihan permulaan yang dinyatakan di atas, lightbox.js juga menyediakan banyak pilihan lain untuk menyesuaikan penampilan dan tingkah laku peti cahaya. Berikut ialah beberapa pilihan biasa:

disableScrolling: lumpuhkan halaman daripada menatal apabila peti cahaya dibuka

fadeDuration: masa kesan pudar

imageFadeDuration: masa kesan pudar imej

Top

; jarak antara bahagian atas imej dan bahagian atas skrin.

Anda boleh menggunakan pilihan ini sebagai parameter dalam kod permulaan:

lightbox.option({
  &#39;disableScrolling&#39;: true,
  &#39;fadeDuration&#39;: 300,
  &#39;imageFadeDuration&#39;: 500,
  &#39;positionFromTop&#39;: 100,
  &#39;showImageNumberLabel&#39;: true,
  &#39;fitImagesInViewport&#39;: true
});

Salin selepas log masuk

Hidupkan dan matikan peti cahaya

Setelah pemulaan selesai, mengklik pada lakaran kecil imej akan membuka peti cahaya, menunjukkan imej bersaiz penuh. Klik di mana-mana dalam peti cahaya atau tekan kekunci ESC untuk menutup peti cahaya.

Buka video dan kandungan web

Selain imej, lightbox.js juga boleh digunakan untuk memaparkan video dan kandungan web. Untuk memaparkan video, hanya tetapkan atribut peti cahaya data kepada "video" dan tetapkan atribut href lakaran kenit kepada URL fail video. Begitu juga, untuk memaparkan kandungan web, tetapkan atribut peti cahaya data kepada "iframe" dan tetapkan atribut href lakaran kenit kepada URL halaman web.

<a href="path-to-videos/video.mp4" data-lightbox="video"> <!-- 视频缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

Salin selepas log masuk

<a href="http://example.com" data-lightbox="iframe"> <!-- 网页缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

Salin selepas log masuk

Ringkasan:

Di atas memperkenalkan penggunaan lightbox.js. Ia adalah pemalam JavaScript yang sangat mudah dan mudah digunakan, sesuai untuk memaparkan imej, video atau kandungan web pada halaman web. Dengan kod HTML mudah dan beberapa pilihan permulaan, anda boleh mencipta kesan peti cahaya yang sangat interaktif dan kelihatan cantik. Saya harap artikel ini dapat membantu anda memahami dan menggunakan lightbox.js dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang penggunaan lightbox.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!