一款經典的 jQuery Lightbox 燈箱效果

一個燈箱效果的圖片展示插件。

• 版本：
• jQuery v1.2.3+

• jQuery Lightbox v2.7.1

• github

實例預覽

使用方法

載入 CSS 文件

1. <link rel="stylesheet" href="lightbox.css">

復制

載入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="lightbox.js"></script> 

復制

DOM 結構

1. <a href="image-1.jpg" data-lightbox="image-1" data-title="文字說明">Image #1</a> 
2.  
3. <!-- 如果是一組相關的圖片，可以對該組圖片設置 data-lightbox 屬性為相同的值。--> 
4. <a href="img/image-2.jpg" data-lightbox="group">Image #2</a> 
5. <a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
6. <a href="img/image-4.jpg" data-lightbox="group">Image #4</a> 

復制

   

以上內容設置好即可，會自動調用 Lightbox。

使用說明

支持標簽

名稱	描述
<a>	鏈接
<area>	圖像映射區域

屬性選項

名稱	說明
rel	值以 "lightbox" 為開頭時，表示需要使用 Lightbox 展示
data-lightbox	設置任意值時，表示需要使用 Lightbox 展示
title	Lightbox 展示時，顯示的標題或說明文字
data-title
href	Lightbox 展示時，顯示的圖片

參數說明

注意：目前除了修改源碼，不能在調用的時候修改參數（因為是自動調用的，並且參數沒有暴露到外部），期待以后的更新能完善該功能。

名稱	默認值	說明
fadeDuration	500	透明效果過渡時間 (ms)
fitImagesInViewport	true	根據窗口大小自動調整圖片尺寸
resizeDuration	700	尺寸變化效果過渡時間
positionFromTop	50	與頂部的距離 (px)
showImageNumberLabel	true	顯示頁碼標簽
alwaysShowNavOnTouchDevices	false	在觸摸設備上始終顯示上下頁按鈕
wrapAround	false	持續顯示上下頁按鈕

 

---

下載