【jQuery】画像を拡大表示させるプラグインのご紹介

シュウ

今回は、【jQuery】簡単に画像を拡大表示させるプラグインについてのご説明です。

こんな方に読んでほしい

写真をクリック後、写真が拡大するプラグインを探している方へ
jQueryを記述するのが苦手な方へ
レスポンシブ対応に困ってる方へ

「VenoBox」とはライトボックスを実装できるjQueryプラグインです。
レスポンシブ対応にもなっており設置もとても簡単です。

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

DEMOサイト

[記事の内容]

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

公式サイトへリンクし「Download」でVenoBoxのファイル一式をダウンロードします。

公式サイト「VenoBox」

VenoBoxの実装方法について

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

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

ファイルの設置場所について

CSS「venobox.css」は
<head> </head>に読み込ませましょう！

jquery「venobox.min.js」は
</body>に読み込ませましょう！

HTMLファイル

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



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

HTMLの記述方法について

imagタグ(画像)を囲んであるaタグに「class=“venobox”」を追加します。
「title」属性に説明文を記述した場合、拡大時にキャプション表示します。
「data-gall」属性に共通の名前を記述した場合、グループ化できます。

HTMLファイル

<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>

JavaScriptの記述方法について

「venobox.min.js」の後に下記のコードを記述しています。

JavaScriptファイル

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

「DEMO」ページで確認してみましょう！

DEMOサイト

VenoBoxのオプションについて

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

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