博客添加图片查看器

在阅读博文时，对图片的放大查看是一种普遍的需求，而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;
}

效果预览

非常不错的查看器，支持图片队列，支持放大缩小！