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

在阅读博文时，对图片的放大查看是一种普遍的需求，而fancybox就是这样一种插件，配置方法十分简单。

引入js和css

页脚插入代码

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

 

指定fancybox作用的区域

在页脚插入这样一段代码

1 <script>
2 $(".forFlow img").each(function () {
3     var element = document.createElement("a");
4     $(element).attr("data-fancybox", "gallery");
5     $(element).attr("href", $(this).attr("src"));
6     $(this).wrap(element);
7 });
8 </script>
View Code

 

上述代码将指定区域内的图片添加了父元素，从而使得当点击图片时，触发fancybox查看器。

样式微调

fancybox在手机端默认最大图片宽度为300px,没有居中，这里在CSS中添加一段代码

1 .fancybox-image{
2 max-width:100%!important;
3 margin:0 auto;
4 }
View Code

 

效果预览

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

转自：https://www.cnblogs.com/gshang/p/12488289.html

posted @ 2020-06-15 00:59  huihuiyule  阅读(101)  评论(0)  编辑  收藏  举报