前端開發：一個燈箱效果顯示圖像、視頻的jQuery插件fancybox

fancybox是一個開源（GPLv3協議）、響應式的燈箱顯示圖像、視頻等信息的插件，支持觸摸操作、可完全定製，支持最常見的觸控（雙擊、雙指縮小、放大等）。移動設備優先，每個設備上都能有看起來不錯的效果，可以創建多個實例，簡單易用，使用硬體加速動畫性能更好，所有的圖形，包括載入圖標，只使用CSS創建。

首先還是給大家推薦一個學習氛圍很好的裙，我自己的，想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

1、下載及初始化

下載完成後解壓，把dist中的所有文件放到項目任意位置，在頁面中引入最新版的jQuery和fancybox的js、css文件。

在body中創建a元素，設置href屬性（燈箱中大圖地址），添加自定義屬性data-fancybox或者data-fancybox="gallery"（需要多個實例需要設置值，自定義一組設置為同一個值），在a元素中引入img（縮略圖）。

無需編寫一行JavaScript，刷新頁面效果就出來了。

npm安裝命令：npm install @fancyapps/fancybox --save

bower安裝命令：bower install fancybox --save

2、功能展示

國際化語言

內置兩種語言，英語（en）和德語（de），可自定義語言。

GIF/2261K

圖片說明

在a標籤中設置data-caption屬性。

基於不同解析度顯示不同圖像

設置data-scrset屬性即可，設置方法如下所示。

內聯HTML

ajax載入內容、過濾

你需要添加一個data-type="ajax"屬性，過濾可以通過data-filter屬性或者data-src來完成。

自定義布局

警告對話框

更改打開方式

GIF/3905K

燈箱縮略圖

手勢操作

fancybox內置屬性還有很多，如寬高、幻燈片設置、鍵盤操作、環形顯示等，內置回調函數（包含初始化、載入前後、顯示前後、關閉前後等），點擊事件如點擊內容、點擊幻燈片、點擊背景燈，同時支持為移動端特別定製，實現更好的展示效果，使用簡單，API文檔豐富能夠滿足你對燈箱效果的大部分需求。

有哪裡寫得不好的地方請大家提出來，請輕噴，謝謝。 同時有什麼與編程相關的好東西可以推舉給我，再次感謝！想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

喜歡這篇文章記得點一下訂閱，每天為您提供最新行業資訊，每天上午10點更新。想看關於什麼方面都可評論說

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！