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，酱紫可以不？

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

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

那咋办捏？好办，找个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
感谢，于是我就又这么水了一贴，么么哒！