本文最后更新于:4 个月前

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

效果预览

img
非常不错的查看器,支持图片队列,支持放大缩小!


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

Mybatis-Java持久层框架 上一篇
What?框架? 下一篇

 目录