【jQuery】シンプルなライトボックス系プラグイン「VenoBox」

WEB 2018.04.15

とても簡単にレスポンシブ対応のライトボックスを実装できるjQueryプラグイン「VenoBox」をご紹介します。

実際の動きを確認できるDEMOページを作ってみました。

DEMO jQuery VenoBox | MISOBLOG

1 VenoBoxのダウンロード
2 VenoBoxの実装方法
- 2.1 HTMLの書き方
- 2.2 JavaScriptの書き方
3 おわり

VenoBoxのダウンロード

公式サイトの「GitHub」ボタンより、VenoBoxのファイル一式をダウンロードします。

VenoBox – responsive jQuery modal window plugin

「Download」ボタンのほうでは、どこからダウンロードするのか分かりませんでした。

VenoBoxの実装方法

ダウンロードしたZIPファイルを解凍し、下記のファイルを読み込みます。

venobox.css
venobox.min.js


<link rel="stylesheet" href="venobox.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/venobox.min.js"></script>

CSSファイルは、<head>タグ内で、
jsファイルは、<body>の閉じタグ直前で、jQuery本体の下に記述してください。

HTMLの書き方


<ul class="list-gallery">
    <li><a href="images/img1.jpg" class="venobox" data-gall="gallery" title="猫1"><img src="images/thumb1.jpg" alt=""></a></li>
    <li><a href="images/img2.jpg" class="venobox" data-gall="gallery" title="猫2"><img src="images/thumb2.jpg" alt=""></a></li>
    <li><a href="images/img3.jpg" class="venobox" data-gall="gallery" title="猫3"><img src="images/thumb3.jpg" alt=""></a></li>
    <li><a href="images/img4.jpg" class="venobox" data-gall="gallery" title="猫4"><img src="images/thumb4.jpg" alt=""></a></li>
</ul>

DEMOページでは、こんな感じでHTMLを書いてます。

拡大表示したいサムネイル画像を囲っているaタグに「class=“venobox”」を追加します。
「data-gall」属性に共通の名前を書くと、グループ化できます。
「title」属性に画像の説明文を書くと、拡大時にキャプションを表示できます。

JavaScriptの書き方

最初に読み込んだ「venobox.min.js」の後に下記のコードを記述しています。


<script>
$(function() {
    $('.venobox').venobox({
        infinigall: true,
        numeratio: true,
    });
});
</script>

DEMOページで使用しているオプションの詳細は下記の通りです。

infinigall	「true」にすると最後の画像までいっても1枚目に戻れるようになる
numeratio	「true」にすると画像のナビゲーション番号と合計枚数を表示できる

その他にも様々なオプションがありますので、下記リンクで確認してみてください。

VenoBox – responsive jQuery modal window plugin