作成してみました。
er8.s323.xrea.com/x/photo/
サムネイル画像が必要です。画像や写真で特に高画質、ファイルサイズが大きくなれば表示に時間がかかります。
\u0026lt;a href=\u0026quot;フルサイズ画像\u0026quot;\u0026gt;：クリックするとフルサイズ画像を開くリンク。
data-lightbox=\u0026quot;gallery\u0026quot;：同じ値にするとグループ化され、左右矢印で切り替え可能。
data-title=\u0026quot;001\u0026quot;：画像下に表示されるタイトル（キャプション）。
\u0026lt;img src=\u0026quot;サムネイル画像\u0026quot;\u0026gt;：ページに表示される小さい画像。
loading=\u0026quot;lazy\u0026quot;：初期表示では読み込まず、画面に来た時に読み込む（高速化）。
Lightbox クリックすると画像がポップアップで拡大表示される機能
以下htmlのコードです。
\u0026lt;head\u0026gt;
\u0026lt;link href=\u0026quot;https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css\u0026quot; rel=\u0026quot;stylesheet\u0026quot;\u0026gt;
\u0026lt;/head\u0026gt;
\u0026lt;body\u0026gt;
\u0026lt;div class=\u0026quot;gallery\u0026quot;\u0026gt;
\u0026lt;a href=\u0026quot;sample/001.jpeg\u0026quot; data-lightbox=\u0026quot;gallery\u0026quot; data-title=\u0026quot;001\u0026quot;\u0026gt;
\u0026lt;img src=\u0026quot;sample/thumbnails/001_thumb.jpeg\u0026quot; loading=\u0026quot;lazy\u0026quot; alt=\u0026quot;\u0026quot;\u0026gt;
\u0026lt;/a\u0026gt;
\u0026lt;script src=\u0026quot;https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;
\u0026lt;/body\u0026gt;
\u0026lt;/html\u0026gt;
