以帝国CMS为例给个人博客加上图片灯箱fancybox
苏晓萍2021-10-05 18:26:02
原理:将fancybox的js和css引入你个人博客需要开启灯箱的页面,一般是文章页面,同时给文章页面的img标签加上a标签,这样就完成了图片灯箱的部署。当然fancybox官网还有关于PDF,MP4
原理:将fancybox的js和css引入你个人博客需要开启灯箱的页面,一般是文章页面,同时给文章页面的img标签加上a标签,这样就完成了图片灯箱的部署。当然fancybox官网还有关于PDF,MP4等进阶的适配方法,喜欢摄影、网站需要开启图片灯箱的和喜欢折腾的个人博客站长可以行动起来了。
演示如下:

代码如下:
演示如下:

代码如下:
在内容模板头部加上
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
在内容模板尾部加上
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
$(function () {
$('.content').find('img').each(function () {
var _this = $(this);
var _src = _this.attr("src");
var _alt = _this.attr("alt");
_this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');
})
})
</script>
我们尊重原创,也注重分享。版权原作者所有,如有侵犯您的权益请及时联系,我们将在24小时之内删除。谢谢!
举报邮箱:1039711343@qq.com
推荐阅读
- 同心共筑防控墙——记宝鸡千阳县崔家头镇的抗“疫”志愿者
- 口感独特的几道下饭菜,好吃爽爆你的味蕾,每次连汤汁都不剩
- 新时代新征程文艺事业繁荣发展的前进号角
- 奋进新时代开启新征程长江电气党委赴西柏坡开展党史学习教育
- 两会@教育_实现中职与普高课程互选、学分互认、学籍互转
- 提升安全_三电等领域宏光MINIEVGAMEBOY更多配置曝光
- 四川凉山10岁女孩帮老师缝补裙子,老师:熟练得让人心疼
- 碧江六龙山乡:做“竹”文章万亩竹海变身“钱袋子”
- 全国人大代表谈贵州粮食生产:发展现代山地特色高效农业把“饭碗”牢牢地端在手里
- 你们在前方全力以赴我们在后方温暖守护
- 56岁傅艺伟近照,曾被称为最美“妲己”,如今头发稀少但气质仍在
- 五代:英明雄武的周世宗柴荣与五丈原上的诸葛亮