這個(gè)方法來自懿古今的一篇文章：https://www.yigujin.cn/1301.html，但是他的網(wǎng)站是WordPress，本文要說的方法適合所有網(wǎng)站。

首先去fancybox網(wǎng)站下載文件包（http://fancyapps.com/fancybox/3/），或者去github：https://github.com/fancyapps/fancybox，下載下來后我們能用到的是dist文件夾下的jquery.fancybox.min.css和jquery.fancybox.min.js，把這兩個(gè)文件引入到文章模板的頭部，jquery.fancybox.min.js要在網(wǎng)站jQuery庫下面，庫jQuery 1.9.1+和jQuery 2+都可以，但首選還是jQuery3+，一般網(wǎng)站都有jQuery庫，所以就不用引入示例中的jquery-3.2.1.min.js了。

這個(gè)燈箱庫起效果的前提是給a標(biāo)簽加上data-fancybox=””，data-fancybox里面可以是images也可以是video，圖片比如data-fancybox=”images”，加上這個(gè)后就自動(dòng)綁定和啟動(dòng)fancybox的click事件，但是大多數(shù)網(wǎng)站文章中的圖片都沒有包裹a標(biāo)簽，那么就需要解決兩個(gè)問題：給img包裹上a標(biāo)簽，a標(biāo)簽里加上data-fancybox=”images” href=”圖片地址”，下面是通用代碼：

<script>$(function () {$('.wenzhang').find('img').each(function () {var _this = $(this);var _src = _this.attr("src");_this.wrap('<a data-fancybox="images" href="' + _src + '"></a>');})})</script> 

假設(shè)你的文章調(diào)用標(biāo)簽在容器.wenzhang里，那么文章里所有的圖片都會(huì)包裹上a標(biāo)簽。我這個(gè)實(shí)現(xiàn)的只是低配的，也就是href地址跟圖片地址是一樣的，標(biāo)準(zhǔn)的是img標(biāo)簽里的圖片是小圖，href地址是小圖地址對(duì)應(yīng)的大圖地址，這樣的好處是點(diǎn)相冊(cè)式預(yù)覽，也就是點(diǎn)下圖中圈出來的按鈕

右邊的縮略圖看著比較美觀，如果href地址跟img標(biāo)簽的src地址一樣，那么右邊的縮略圖只截取大圖縮小后的一部分，風(fēng)景圖片看起來還好，因?yàn)轱L(fēng)景圖片在拍攝時(shí)會(huì)突出主體，如果是普通文章的截圖看起來就很差勁了，因?yàn)闆]有中心點(diǎn)，截取后圖片是殘缺的。

更深層次的使用大家可以去看文檔：https://fancyapps.com/fancybox/3/docs/。

2019年6月19日補(bǔ)充：在查看官方示例時(shí)發(fā)現(xiàn)預(yù)覽圖片底部有文字說明，這是因?yàn)閍標(biāo)簽加上了data-caption，我們可以獲取圖片alt屬性的值然后賦給data-caption，上面的代碼簡單修改下就可以實(shí)現(xiàn)

$(function () {$('.wenzhang').find('img').each(function () {var _this = $(this);var _src = _this.attr("src");var _alt = _this.attr("alt");_this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');})})

2019年7月3日補(bǔ)充：加上

$(this).attr('title','' + _alt + '');

給圖片加上title標(biāo)簽，title的內(nèi)容跟alt一樣，有利于搜索引擎對(duì)圖片的收錄。