博客园图片添加fancybox3预览效果

实现方法

参考链接：https://www.cnblogs.com/mafeifan/p/5084405.html

由于原博文js链接失效，且是基于fancybox2，所以我根据fancybox3稍作修改，效果还不错。

效果预览：

页首 HTML 代码

<!--fancybox-->
<link href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css" rel="stylesheet">

页脚 HTML 代码

<!--fancybox-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/yaohunzhanyue/usefancybox.js"></script>

存在问题

Q:fancybox为什么放大按钮点击不了？
A:官方示例是a链接里的href填大图url，img里src填缩略图url。

Q:你之前放的测试图a的href和img的src明明一样啊，为什么能放大？
A:这个图从fancybox官方扒来的，比较特殊，如果直接在浏览器打开你会发现。应该是与使用的图床有关系，比如：这里。

所以建议不使用图床的同学把fancybox当作影集工具使用，放大功能还是用下面的方式实现吧。（有更好的建议欢迎留言分享）

解决方案：添加鼠标hover放大方式

参考此博文的css实现方式，代码如下：

// 图片放大
// --------------------------------------------------
.post-body p img
{
    // z-index: 1000; //设置为最顶层，以免左侧导航栏遮挡
    position: relative;
    // cursor: pointer;//鼠标样式：手势
    transition: all 1.2s; //放大动画的时间：1.2s
}
.post-body img:hover {
    transform: scale(1.4); //放大倍数：1.4倍
}

来源：https://www.cnblogs.com/yaohunzhanyue/p/12186408.html