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

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

這個燈箱庫起效果的前提是給a標簽加上data-fancybox=””，data-fancybox里面可以是images也可以是video，圖片比如data-fancybox=”images”，加上這個后就自動綁定和啟動fancybox的click事件，但是大多數網站文章中的圖片都沒有包裹a標簽，那么就需要解決兩個問題：給img包裹上a標簽，a標簽里加上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> 

假設你的文章調用標簽在容器.wenzhang里，那么文章里所有的圖片都會包裹上a標簽。我這個實現的只是低配的，也就是href地址跟圖片地址是一樣的，標準的是img標簽里的圖片是小圖，href地址是小圖地址對應的大圖地址，這樣的好處是點相冊式預覽，也就是點下圖中圈出來的按鈕

右邊的縮略圖看著比較美觀，如果href地址跟img標簽的src地址一樣，那么右邊的縮略圖只截取大圖縮小后的一部分，風景圖片看起來還好，因為風景圖片在拍攝時會突出主體，如果是普通文章的截圖看起來就很差勁了，因為沒有中心點，截取后圖片是殘缺的。

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

2019年6月19日補充：在查看官方示例時發現預覽圖片底部有文字說明，這是因為a標簽加上了data-caption，我們可以獲取圖片alt屬性的值然后賦給data-caption，上面的代碼簡單修改下就可以實現

$(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日補充：加上

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

給圖片加上title標簽，title的內容跟alt一樣，有利于搜索引擎對圖片的收錄。