Demo

このブログで今はこれを使っているので，画像を貼っつけて置きます．
クリックして確かめてください．

image

今後変えるかもしれないので，公式のデモページを参照してください．

GLightbox

画像をクリックして拡大表示したいとき，別のウィンドウ出すのは不便だし，出来ればモーダルウィンドウ(ポップアップ)で表示させたい．
でもそんなコード書くのは面倒すぎる...って人はたくさんいて，Lightboxというライブラリを使えば簡単に実現出来るってことで滅茶苦茶流行りました．

.........jQueryなんだよなぁ...
この前，出来るだけページ容量減らそうと，使ってたjQuery，全てjsに書き直したんだよなぁ...
jQueryのダウンロードしたくない... lightboxでもjqueryをダウンロードせずに使用する方法ありますが，でも結局別ファイルをダウンロードする必要が出てきます．
私は，清楚でピュアなJSが良いんだ！
こんな人他にもたくさん居るでしょう．
ということで，GLightboxの紹介記事です．

GLightboxの紹介では

GLightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.

とあるので，ぴったりなわけです．

ついでに，拡大前の画像と拡大後の画像urlは別なのが指定できて，拡大後の画像はクリックするまで読み込まないのでページ容量の節約にもなります．
まぁLightboxでも出来そうですが．

Usage

<html>
  <head>
    ~~
    <!-- ダウンロード派 -->
    <link rel="stylesheet" href="{{ get_url(path="dist/glightbox.min.css", trailing_slash=false) }}">
    <!-- CDN派 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
  </head>
  <body>
    <!-- 画像表示 -->
    <!-- fgfg.jpgが拡大前の画像，hghg.jpgが拡大後の画像 -->
    <a class="glightbox" href="hghg.jpg">
      <img src="fgfg.jpg" alt="image">
    </a>

    ContentContentContent...
    <!-- ダウンロード派 -->
    <script src="{{ get_url(path="dist/glightbox.min.js", trailing_slash=false) }}"></script>
    <!-- CDN派 -->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <!-- オプション -->
    <script type="text/javascript">
      const lightbox = GLightbox({
      touchNavigation: true,
      loop: true,
      autoplayVideos: true,
    });
    </script>
  </body>
</html>

For zola

先程の例を見てわかるとおり，拡大前後で異なる画像にすることが出来ます．
zolaでは画像を自動的にリサイズする機能をサポートしているため，拡大前の画像をリサイズさせた画像にするようなショートコードがかければ便利なわけです．
ということで例えばこんなん

{% set image_path='../static/' ~ path %}
{% if height and width %}
{% set resized = resize_image(path=image_path, height=height, width=width, op="fit") %}
<a class="glightbox {{ class | default(value="") }}" href="/{{ path }}">
  <img src="{{ resized | safe }}" alt="image">
</a>
{% elif width %}
{% set resized = resize_image(path=image_path, width=width, op="fit_width") %}
<a class="glightbox {{ class | default(value="") }}" href="/{{ path }}">
  <img src="{{ resized | safe }}" alt="image">
</a>
{% elif height %}
{% set resized = resize_image(path=image_path, height=height, op="fit_height") %}
<a class="glightbox {{ class | default(value="") }}" href="/{{ path }}">
  <img src="{{ resized | safe }}" alt="image" style="width: auto;">
</a>
{% else %}
{% set resized = resize_image(path=image_path, width=768, op="fit_width") %}
<a class="glightbox {{ class | default(value="") }}" href="/{{ path }}">
  <img src="{{ resized | safe }}" alt="image">
</a>
{% endif %}

このようなshortcodesを用意すれば，マークダウンの方で，

{{ image(path="hghg.jpg") }}

とでもすれば，勝手にリサイズされた(上の例だと幅768のアスペクト比を合わせた)画像が表示され，クリックして初めてhghg.jpgがダウンロードされるという感じになります．

上の例だと，説明付き画像とかに対応してませんが，簡単に出来るので，試してください．

ピュアなJSが好みな人は是非．