15°

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

实现方法

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

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

效果预览:
test

页首 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

全部评论: 0

    我有话说: