博客添加圖片查看器

在閱讀博文時，對圖片的放大查看是一種普遍的需求，而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;
}

效果預覽

非常不錯的查看器，支持圖片隊列，支持放大縮小！