标签：fancybox attr 查看器 博客 element 添加 图片

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

效果预览

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

标签：fancybox,attr,查看器,博客,element,添加,图片
来源： https://www.cnblogs.com/gshang/p/12488289.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。