HexoにLightboxを適用した

日記

前略
鴉河雛です

─── というわけで、
よくブログとかにある、画像をクリックするとポップアップしてもわーんと表示してくれる便利なあいつ。

テーマを変更してから気づいたんですが、今使っているテーマにはその機能付いていなかったんですよね・・・
HexoでもPluginとしてLightboxとかFancyboxとかあるみたいですが、
なんだかうまくいかなかったので、もう適当に編集して入れてみました。

設定

設定は簡単。

各テーマでは、おそらくscripts.ejsとか、styles.ejsとかあると思うのでそこに追記です。

1
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
1
2
3
4
5
6
7
8
9
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<script>
$(function(){
  $('div.content img').wrap(function() {
    return '<a href="'+$(this).attr('src')+'" data-lightbox="image"></a>';
  });
});
</script>

たまたま参考にしてたところのやり方だと、Lightboxで追加されるimgまでWrapしてたので、そこだけはこちらで修正。

てことで、うちでもまたLightbox使えるようになったので、SSのページを戻していく作業をしようかなと思いまする。

では、また。