可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

Typecho灯箱插件slimbox2不显示图片、图片一直在加载、404错误解决方案

今天抽时间把小蜗牛博客的主题GreenGrape2中的原来灯箱换成了功能更强大、也很简洁的slimbox2。哎呀,准确的说是把slimbox2移植到GreenGrapes2啦。但是其实这玩意略微有那么一点点坑呢。

下面来说说我遇到的几个坑

范围选择器

这玩意是个啥啊?哎就是jQuery选择器啦。怎么设置这一项的值呢?

很简单,随便打开一篇带图的博文,然后定位到图片的<img>标签,再往前一点,你会发现这块大概是这样的:

<div class="article-content clearfix"> 

还等什么,把entry_content 替换成article-content,也就是.article-content a:has(img),保存就好啦。

点击图片没反应

哦,我大概是忘记说了,那个选择器啊……要带a标签的才可以哎,所以,你给你的图片加个a标签试试?比如说类似如下:

<a href="http://www.example.com/3442182753.png"><img title="" src="https:/ http://www.example.com/3442182753.png" alt="" /></a> 

此时点图片就会弹出来灯箱啦

不想给图片加a标签,直接把选择器选择到<img>标签行不行

比如说,咱把选择器改成.article-content img,酱紫可以不?

当然不行啦,此时你点图片,就会一直在加载,大概是这样子吧:

Typecho灯箱插件slimbox2不显示图片、图片一直在加载、404错误解决方案

此时看控制台,会有一个404,文件名字叫做undefined,还用猜嘛,JS的问题……

Typecho灯箱插件slimbox2不显示图片、图片一直在加载、404错误解决方案

那咋办捏?好办,找个js大神,改了slimbox.js那个文件,让它不去a标签里找src直接找img标签的src得了。

反正我不太会js。

啊啊啊,废话一大堆,那咋办啊,挨个给图片加a标签啊?

当然不要了!我们可以选择用JavaScript给图片增加a标签呀,其实用PHP也可以,要对$this->content中的img标签处理下就可以啦。

这里就说下用JS给图片添加a标签的方法

footer.php中,找一块(一般是在末尾)添加如下代码:

<script type="text/javascript"> $('img').wrap(function () { return '<a href="' + this.src + '" title="' + this.alt + '"></a>'; }); </script> 

综上所述,怎么把这个插件集成到主题里呢?

举例如下哈,

头部引入slimbox2.css

<link rel="stylesheet" href="http://www.example.com/usr/themes/GreenGrapes2/css/slimbox2.css"> 

尾部引入slimbox2.js以及JS代码

<script src="http://www.example.com/usr/themes/GreenGrapes2/js/slimbox2.js" async></script>  <script type="text/javascript"> $('img').wrap(function () { return '<a href="' + this.src + '" title="' + this.alt + '"></a>'; });  jQuery(function ($) { $(".article-content a:has(img)").slimbox({ overlayOpacity: 0.75, overlayFadeDuration: 100, imageFadeDuration: 400, captionAnimationDuration: 200, loop: true, counterText: "Image {x} of {y}" }); });</script> 

其中的一些参数可以自由发挥哈。当然,别忘记把那个js、css还有图片拷贝到对应的网站目录下。

我喜欢原来的灯箱,咋办

这个……用如下命令吧:

git checkout abf49c63c8a1175fe783bf8803215ef640b5213d 

但是这样就不能再git pull,就又没啦。那咋办呢,既想有原来的灯箱,还想保持最新版本?

那就麻烦你cherrypick或者通过git branch啦。

主题二三事

这个主题是在今年三月某蜗牛童鞋从Jekyll转回到Typecho之后我给选的,但是后来发现功能有所欠缺,于是便亲自上手进行改动。在此,还要感谢原作者的设计,感谢某蜗牛的信任。当然,还有使用此主题的人们(我猜,除了永远的萌新应该是没有人用吧)。
哦对了,忘记说了,这主题……彩蛋挺多的,这主题已经快被我搞残废了。
也欢迎大家来访问某蜗牛的博客来查看主题演示,https://www.tougetu.com/,偷个图,好记不好记?不管你记住没记住,反正我是记住了。

主题开源地址

GreenGrapes2
感谢,于是我就又这么水了一贴,么么哒!


转载请注明:逗比根据地 » Typecho灯箱插件slimbox2不显示图片、图片一直在加载、404错误解决方案

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址