在閱讀博文時，對圖片的放大檢視是一種普遍的需求，而fancybox就是這樣一種外掛，配置方法十分簡單。

引入js和css

頁尾插入程式碼

<script type="text/javascript" src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.css">
 

指定fancybox作用的區域

在頁尾插入這樣一段程式碼

<script>
$(".forFlow img").each(function () {
    var element = document.createElement("a");
    $(element).attr("data-fancybox", "gallery");
    $(element).attr("href", $(this).attr("src"));
    $(this).wrap(element);
});
</script>
 

上述程式碼將指定區域內的圖片添加了父元素，從而使得當點選圖片時，觸發fancybox檢視器。

樣式微調

fancybox在手機端預設最大圖片寬度為300px,沒有居中，這裡在CSS中新增一段程式碼

.fancybox-image{
max-width:100%!important;
margin:0 auto;
}

效果預覽

非常不錯的檢視器，支援圖片佇列，支援放大縮小！