登录
  • 人们都希望被别人需要 却往往事与愿违
  • 不要盲目地崇拜任何权威, 因为你总能找到相反的权威@罗素 (哲学家 数学家)

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

不懂编程 Benny小土豆 1597次浏览 2075字 2个评论
文章目录[显示]

今天抽时间把小蜗牛博客的主题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
感谢,于是我就又这么水了一贴,么么哒!


文章版权归原作者所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明原作者和本文原始地址:
https://www.bennythink.com/slimbox-not-working.html
喜欢 (1)
分享:-)
Benny小土豆
关于作者:
If you have any further questions, feel free to contact me in English or Chinese.
发表我的评论(代码和日志请使用Pastebin或Gist)
取消评论

                     

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)
(2)个小伙伴在吐槽
  1. 博主这是什么评论框?
    DQ2019-01-17 17:06 回复
    • Benny小土豆
      wp自带
      Benny小土豆2019-01-19 15:11 回复