【jQuery】シンプルなLightbox系プラグイン［Darkbox jQuery Gallery］の使い方

今日ご紹介する［Darkbox jQuery Gallery］は、有名な［Lighbox］系のミニマルなjQueryプラグインです。

サンプル : https://on-ze.com/demo/jquery-darkbox-gallery/

設置方法

実装方法は簡単で、基本的にはGitHubからダウンロードしてきたファイル一式をアップロードするだけで設置可能。
まずは下記リンク先からどうぞ。

GitHub : https://github.com/rokobuljan/Darkbox-Gallery

データ一式をダウンロードしたら、サーバーにアップロードして設置。HTML側で各ファイルを読み込みます。

<link rel="stylesheet" href="darkbox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="darkbox.js"></script>

さらにdarkboxを作動させる画像を設置。
カスタムデータ属性「data-darkbox」を使って［Darkbox jQuery Gallery］の拡大で表示させる画像を指定します。
具体的には次のようなコードになります。

<img src="../images/sample.png" data-darkbox="../images/sample.png">

これで設置完了。
簡単すぎますね……！

オプション設定

追加の設定項目ではグループ化と画像の説明を指定することができます。

<img src="../images/sample.png"
    data-darkbox="../images/sample.png"
    data-darkbox-group="group"
    data-darkbox-description="<b>Title</b><br>Lorem ipsum dolor sit amet">

以上。
本当に簡単なので初心者の方でも難なく実装できると思います。
ぜひお試しください。