SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

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

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」ページで確認してみましょう!

VenoBoxのオプションについて

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

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

まとめ

今回はこれで以上です。

POINT
  • 1、「CSSファイル」 venobox.cssを設置します
  • 2、「JSファイル」 venobox.min.jsを設置します
  • 3、aタグに「class=“venobox”」をつけます
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top