【jQuery】VenoBoxで画像をクリック拡大表示する方法!コピペで簡単実装

シュウ

公開日: 2020.03.17 / 更新日: 2026.11.14
今回は、【jQuery】VenoBoxで画像をクリック拡大表示する方法についての解説です！

こんな方に読んでほしい

画像をクリックして拡大表示させたい方
写真をクリックすると、画面中央に大きく表示されるライトボックスを設置したい方です。
jQueryの記述が苦手な方
コピペ中心で、簡単にプラグインを導入したい方です。
レスポンシブ対応に困っている方
スマホやタブレットでも見やすく画像を拡大表示させたい方です。

「VenoBox」とは、ライトボックスを実装できるjQueryプラグインです。
レスポンシブに対応しており、設置も簡単です。画像のほか、動画やiframeの表示にも使用できます。

「VenoBox」がどのような動きをするのか、実際に確認できる「DEMO」ページを作成しました。

DEMOサイト

[記事の内容]

VenoBoxのファイルをダウンロード

公式サイトにアクセスし、「Download」からVenoBoxのファイル一式をダウンロードします。

公式サイト「VenoBox」

VenoBoxの実装方法

ダウンロードした「VenoBox-master」のZIPファイルを解凍し、以下の2つのファイルを読み込みます。

「CSSファイル」venobox.css
「JSファイル」venobox.min.js

ファイルの読み込み HTML編

CSSは<head>内に、JSは</body>の直前に読み込みます。
VenoBoxはjQueryが必要なため、venobox.min.jsより前にjQueryを読み込みます。書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>VenoBoxの実装方法について</title>
<!--venobox.css-->
<link rel="stylesheet" href="venobox.css">
</head>
<body>

<!--jQuery・venobox.min.js-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/venobox.min.js"></script>
</body>
</html>

●①CSSの読み込み: venobox.cssを<head>内で読み込み、拡大表示時のデザインを適用します。

●②jQueryの読み込み: VenoBoxはjQueryプラグインのため、先にjQuery本体を読み込みます。

●③VenoBoxの読み込み: venobox.min.jsは、必ずjQueryより後に読み込みます。

ページの表示速度を考慮し、JSファイルは</body>の直前に読み込むのがおすすめです。

画像の設置 HTML編

拡大表示したい画像を囲んでいるaタグに、class="venobox"を追加します。書き方は以下のようになります。

<ul class="gallery">
 <li><a href="画像パス" class="venobox" data-gall="gallery" title="タイトル01">
  <img src="画像パス" alt="">
 </a></li>

 <li><a href="画像パス" class="venobox" data-gall="gallery" title="タイトル02">
  <img src="画像パス" alt="">
 </a></li>

 <li><a href="画像パス" class="venobox" data-gall="gallery" title="タイトル03">
  <img src="画像パス" alt="">
 </a></li>
</ul>

●①class=”venobox”: VenoBoxを適用するための目印です。このaタグがクリックされると画像が拡大表示されます。

●②href: 拡大表示する画像のパスを指定します。

●③data-gall: 共通の名前を指定した画像同士をグループ化し、矢印で切り替えられるギャラリーにします。

●④title: 説明文を記述すると、拡大表示時にキャプションとして表示されます。

グループ化しない場合は、data-gallを省略すると単体の画像として拡大表示されます。

VenoBoxの起動 JavaScript編

venobox.min.jsの後に、以下のコードを記述します。書き方は以下のようになります。

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

●①$(function() {}): HTMLの読み込みが完了してから、中の処理を実行します。

●②$(‘.venobox’).venobox(): class="venobox"が付いた要素に、VenoBoxの機能を適用します。

●③infinigall: true: ギャラリーの最後の画像から、最初の画像へ戻れるようにします。

●④numeratio: true: 現在の画像番号と合計枚数を表示します。

実際の動きは、「DEMO」ページで確認してみましょう！

DEMOサイト

VenoBoxのオプションについて

infinigall	`true`を指定すると、最後の画像から最初の画像へ戻ります
numeratio	`true`を指定すると、現在の画像番号と合計枚数を表示します
arrowsColor	ギャラリーナビゲーション矢印の色を変更します

公式サイトには他にもオプションがありますので、ぜひご確認ください。

公式サイト「VenoBox」

まとめ

今回は、jQueryプラグイン「VenoBox」を使って、画像をクリックすると拡大表示されるライトボックスを実装する方法を紹介しました。
CSSとJSファイルを読み込み、画像のaタグにclass="venobox"を追加して、JavaScriptで起動するだけで設置できます。
data-gall属性でグループ化すれば、ギャラリー形式の表示も可能です。ぜひ活用してみてください。

POINT