非常不错的查看器,支持图片队列,支持放大缩小!
在阅读博文时,对图片的放大查看是一种普遍的需求,而fancybox就是这样一种插件,配置方法十分简单。
引入js和css
页脚插入代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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">
指定fancybox作用的区域
在页脚插入这样一段代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
上述代码将指定区域内的图片添加了父元素,从而使得当点击图片时,触发fancybox查看器。
样式微调
fancybox在手机端默认最大图片宽度为300px,没有居中,这里在CSS中添加一段代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 .fancybox-image{ 2 max-width:100%!important; 3 margin:0 auto; 4 }
效果预览
非常不错的查看器,支持图片队列,支持放大缩小!
转自:https://www.cnblogs.com/gshang/p/12488289.html
--欢迎大家来交流反馈。