Lightboxの最新版ライブラリ「Lightbox3」の利用方法サンプル

画像拡大(モーダル表示)系のライブラリはLightbox2を使用していたが、最新版のLightbox3がリリースされているのを最近知った。試したところ第一印象としてデザインや挙動面がアップグレードされているように感じた。今後はこちらを使用していきたいので以下にサンプルとソースコードをメモ。

サンプル

https://taitan916.info/sample/lightbox3/

Lightbox3

公式サイト

https://lokeshdhakar.com/projects/lightbox3/

Github

https://github.com/lokesh/lightbox3

CDN

CDNで使う場合は以下を記述する。尚、jQuery依存は無くなったためバニラJSで使用可能。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightbox3@1/dist/lightbox3.css">
<script src="https://cdn.jsdelivr.net/npm/lightbox3@1/dist/lightbox3.min.js"></script>

利用方法

ソースコード

<article>
    <b>グループ・キャプションなし</b>
    <div class="img_area">
        <div>
            <a href="./img/001.jpg" data-lightbox>
                <img src="./img/001.jpg">
            </a>
        </div>
        <div>
            <a href="./img/002.jpg" data-lightbox>
                <img src="./img/002.jpg">
            </a>
        </div>
        <div>
            <a href="./img/003.jpg" data-lightbox>
                <img src="./img/003.jpg">
            </a>
        </div>
    </div>
</article>

<article>
    <b>グループ・キャプションあり</b>
    <div class="img_area">
        <div>
            <a href="./img/001.jpg" data-lightbox="group_1" data-caption="プチトマト">
                <img src="./img/001.jpg">
            </a>
        </div>
        <div>
            <a href="./img/002.jpg" data-lightbox="group_1" data-caption="バナナ">
                <img src="./img/002.jpg">
            </a>
        </div>
        <div>
            <a href="./img/003.jpg" data-lightbox="group_1" data-caption="桃">
                <img src="./img/003.jpg">
            </a>
        </div>
    </div>
</article>

<article>
    <b>文字リンク</b>
    <div>
        <a href="./img/001.jpg" data-lightbox>
            プチトマト
        </a>
    </div>
    <div>
        <a href="./img/002.jpg" data-lightbox>
            バナナ
        </a>
    </div>
    <div>
        <a href="./img/003.jpg" data-lightbox>
            桃
        </a>
    </div>
</article>

使い方の要点

• aタグにdata-lightbox属性を付与
• グループ化させたい場合はdata-lightbox属性に値を入力(例:data-lightbox="test_group")
• キャプションを表示させたい場合はdata-caption属性と値を入力(例:data-caption="テキスト")

所感

2系と比べてスタイリッシュになったというかモダンになったというか、デザインや挙動面がすごく良い感じ。なんだかんだとずっと2系を使っていたが、今後はこちらの3系を使用していきたい。