欢迎您访问苏晓萍个人博客,文字我所爱也,摄影亦我所爱也。
  • 微信客服:QuestLive微信客服
  • 微信公众号微信公众号
您现在的位置是:首页 > 晓谈博客

以帝国CMS为例给个人博客加上图片灯箱fancybox

苏晓萍2021-10-05
原理:将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>

所有文章未经授权禁止转载、摘编、复制或建立镜像,违规转载法律必究。

举报邮箱:1039711343@qq.com

相关标签:图片灯箱   个人博客   帝国CMS   fancybox

推荐阅读