首页 > 其他 > 详细

博客添加图片查看器

时间:2020-07-16 16:16:53      阅读:59      评论:0      收藏:0      [点我收藏+]

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

效果预览

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

博客添加图片查看器

原文:https://www.cnblogs.com/melodyjerry/p/13321977.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!