ギャラリー | sand-box

ギャラリー01

-複数の画像を一覧で見せる-

CSS のcolumns を使って段組みを表示する。
画像をクリックして拡大するためにLightbox というJavaScript ライブラリを利用する。

［使用するライブラリ］
＊ jQuery
＊ Lightbox（https://lokeshdhakar.com/projects/lightbox2/）

画像をリンクする<a> タグにdata-lightbox=”半角英数字で名前”をつけると、背景が暗くなって画像が出てくる仕様になります。
複数画像をグループ化したい場合は、data-lightbox=” 半角英数字で同一のグループ名”、
キャプションを入れたい場合はdata-title=”キャプションタイトル”を設定してください。

body 終了タグ直前に jQuery、Lighbox、動きを制御する自作のJS （任意）の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>

<script src="js/6-2-1.js"></script>
</ぼでぃ>

Bluesky