公式HP

https://lokeshdhakar.com/projects/lightbox2/

インストール

https://github.com/lokesh/lightbox2/releases からzipファイルをダウンロードする。

staticフォルダにファイルを移動する

distフォルダの中身を static/lightbox フォルダに移動させる

extend_head.html

layouts/partials/extend_head.html を作成し、

<link href="{{ .Site.BaseURL }}lightbox/css/lightbox.css" rel="stylesheet" />
<script src="{{ .Site.BaseURL }}lightbox/js/lightbox-plus-jquery.min.js"></script>

を追記する。

使用例

#+attr_html: :rel lightbox[1] :height 200
[[file:/org/static/img/20230715/20230715_1.jpg][file:/org/static/img/20230715/thumbnail/20230715_1.jpg]]

こんな風に使う。

同じページにある画像を複数グループに分けたいときは :rel lightbox[1] :rel lightbox[2] のように分ける。