lightbox.js是一種常用的JavaScript插件，用於在網頁中展示圖像、影片或網頁內容的瀏覽效果。它提供了一種簡單而優雅的方式，使得瀏覽者可以點擊縮圖或按鈕來打開一個模態框，顯示全尺寸的圖像或媒體。在本篇文章中，我們將詳細介紹lightbox.js的用法。 下載和引入lightbox.js 要使用lightbox.js，首先需要從官方網站下載外掛程式的最新版本。下載完成後，將插件檔案複製到專案的JavaScript資料夾中。然後，在HTML文件的頭部或腳本部分以標籤引入lightbox.js檔案。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script src="path-to-js/lightbox.js">登入後複製建立圖片縮圖為了使用lightbox.js，需要在HTML文件中建立圖片縮圖。通常情況下，圖像縮圖使用標籤來包裝，並且它們的href屬性指向全尺寸圖像的URL。此外，還需要新增一個data屬性，用於指定lightbox.js的觸發器。 登入後複製在上面的範例中，data-lightbox屬性設定為"gallery"，這表示這些影像將在同一個畫廊（gallery）中顯示，並且可以透過左右箭頭來切換影像。 透過JavaScript初始化lightbox.js一旦圖片縮圖建立完成，就可以透過JavaScript來初始化lightbox.js。使用以下程式碼，可以找到並初始化所有帶有data-lightbox屬性的圖像縮圖：lightbox.option({ 'resizeDuration': 200, 'wrapAround': true })登入後複製在上面的程式碼中，我們透過lightbox.option()方法來設定一些選項。 resizeDuration選項指定影像從一個大小變更為另一個大小所需的時間（以毫秒為單位）。 wrapAround選項用於指定是否啟用循環瀏覽。 自訂設定選項除了上述的初始化選項外，lightbox.js還提供了許多其他選項，可用於自訂lightbox的外觀和行為。以下是一些常見的選項：disableScrolling：禁止頁面在打開lightbox時滾動；fadeDuration：淡入淡出效果的時間；imageFadeDuration：圖像淡入淡出效果的時間；positionFromTop：圖片頂部距離螢幕頂部的距離；showImageNumberLabel：顯示目前影像在圖庫中的位置和總數；fitImagesInViewport：自動調整影像大小以適應螢幕視窗。 可以在初始化程式碼中使用這些選項作為參數：lightbox.option({ 'disableScrolling': true, 'fadeDuration': 300, 'imageFadeDuration': 500, 'positionFromTop': 100, 'showImageNumberLabel': true, 'fitImagesInViewport': true });登入後複製開啟和關閉lightbox一旦初始化完成，點擊圖片縮圖將會開啟lightbox，顯示全尺寸的圖像。點選lightbox中的任意位置或按下ESC鍵可關閉lightbox。 開啟影片和網頁內容除了圖像，lightbox.js還可以用來展示影片和網頁內容。要展示視頻，只需設定data-lightbox屬性為"video"，並將縮圖的href屬性設定為視頻檔案的URL。類似地，要展示網頁內容，將data-lightbox屬性設為"iframe"，並將縮圖的href屬性設定為網頁的URL。 登入後複製 登入後複製總結： 以上介紹了lightbox.js的用法。它是一個非常方便且易於使用的JavaScript插件，適用於網頁中展示圖像、影片或網頁內容。透過簡單的HTML程式碼和一些初始化選項，可以創造一個互動性強、外觀精美的lightbox效果。希望這篇文章能幫助你更能理解並使用lightbox.js。
