高機能画像ギャラリーを手軽に設置できるjQueryプラグイン「lightGallery」

PR WEB制作, WordPressカスタマイズ 0

サイトなどに高機能な写真ギャラリーを設置できる「jQuery lightgallery」を使ってみました。

今回はその利用方法などの紹介。

スポンサーリンク
レクタングル（大）広告

lightGalleryとは

jQuery lightGallery

「jQuery lightgallery」は、jQueryで動作するレスポンシブなライトボックスギャラリープラグインです。

CSSとjsファイルを呼び出し、簡単なコードを書くことで、高機能な写真ギャラリーをサイトに設置することができます。

呼び出すjsファイルを変更したり、実行コードを多少修正することで、簡単に動作をカスタマイズ出来るのも特徴です。

ギャラリー表示例

lightGalleryを実際に動作させてみると以下のようになります。

レスポンシブに対応していると同時に、こんな感じで、スワイプでの写真切り替えにも対応しています。

lightGallery動作

以下では、このlightGalleryの使い方を簡単に説明します。

lightGalleryの使い方

以下では、サイトでのlightGalleryの設置方法を紹介します。

主な手順

lightGalleryを利用するのに必要な主な手順は以下です。

  1. lightGalleryのダウンロード＆設置
  2. ヘッダーでCSSの呼び出し
  3. フッターでJSファイルの呼び出し
  4. フッターに実行コードの記入
  5. HTMLでAやIMGタグを記入

lightGalleryのダウンロード＆設置

まずは、GitHubの「Download ZIP」ボタンからファイルをダウンロードします。

GitHubからlightGalleryをダウンロード

ダウンロードしたファイルを解凍して、中にある「dist」フォルダ内にあるフォルダすべてをプロジェクトフォルダ内に移動します。

「dist」フォルダの中には以下のフォルダがあります。

  1. css
  2. fonts
  3. img
  4. js

lightGalleryに必要なファイル

これらのフォルダを全てをプロジェクトフォルダ直下にコピペします。

WordPressの場合は、テーマフォルダ直下。

ヘッダーでCSSの呼び出し

次に、<head></head>内で以下のようにlightGalleryのCSSファイルを呼び出します。

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />

フッターでJSファイルの呼び出し

フッターの</body>タグ手前あたりでjsファイルを以下のように呼び出します。

<!--jQueryを呼び出す ver.1.8.0以上が必要-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--lightGalleryのスクリプト-->
<script src="js/lightgallery.min.js"></script>
<!--欲しい機能のjsファイルを呼び出す-->
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script src="js/lg-autoplay.min.js"></script>
<script src="js/lg-hash.min.js"></script>
<script src="js/lg-pager.min.js"></script>
<script src="js/lg-video.min.js"></script>
<script src="js/lg-zoom.min.js"></script>

「lg-xxxxxxxx.min.js」というファイルは、プラグインファイルです。必要な機能を追加したい時にJSファイルを呼び出します。

機能としては、以下のような機能があります。

  • サムネイル機能
  • フルスクリーン機能
  • オートプレイ機能
  • 動画表示機能
  • ズーム機能

詳しくは、デモページを見てみると良いかと思います。

Demos
lightGallery supports features such as, Animated thumbnails, Pinch / double tap to zoom, HTML5 videos, YouTube, VImeo, videos, social media share, Rotate, fullS...
www.lightgalleryjs.com

フッターに実行コードの記入

あとは、先程のjsファイル呼び出しコードのあとに以下のようにjQueryの実行コードを記入します。

<script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });
</script>

HTMLでAやIMGタグを記入

最後にHTMLで以下のようにマークアップします。

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

注意点

<div id=”lightgallery”></div>ラッパーの中には、AとIMGタグ以外の余計な要素が入ると動作しなくなるので注意してください。（※ul、liタグなどに対応させることはできる模様。）

例えば、以下のように書くと、動作しなくなります。

<div id="lightgallery">
  <p>ギャラリー</p>
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  ...
</div>

WordPressで利用する場合

wordpress1

僕は最初、jQueryプラグイン「Lightbox」のようにlightGalleryも利用できると思っていました。

ページの画像をクリックすると画面内に拡大表示してくれる「Lightbox」をWordPressで使う方法
今回は、画像を手軽にギャラリー表示できるLightboxというjQueryプラグインをWordpressテーマでカスタマイズして利用...
nelog.jp
2015-01-02 16:20

ただ、lightGalleryは、本文中の画像を拡大表示（ライトボックス表示）するようには出来ていませんでした。（※上にも書いたように、余計な要素が入り込むと動作しないため）

ですので、バージョン1.2.0時点では、単に画像（動画）ギャラリーとしてしか利用できないようです。

以下で、使い方を簡単に説明します。

ヘッダーでCSSの呼び出し

WordPressテーマでの呼び出しは、、<head></head>内で以下のようにlightGalleryのCSSファイルを呼び出します。

<link type="text/css" rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/lightgallery.min.css" />

子テーマでは、get_stylesheet_directory_uri()、親テーマではget_template_directory_uri()を利用した方が良いかもしれません。

フッターでの呼び出し

フッターの</body>手前での呼び出しをまとめて書くと以下のようになります。

<!--jQueryを呼び出す ver.1.8.0以上が必要-->
<!--テーマでjQuery外に出されていない場合は呼び出す-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<!--lightGalleryのスクリプト-->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lightgallery.min.js"></script>
<!--欲しい機能のjsファイルを呼び出す-->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-thumbnail.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-fullscreen.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-autoplay.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-hash.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-pager.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-video.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/is/lg-zoom.min.js"></script>
<!--実行コードの呼び出し-->
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#lightgallery").lightGallery();
});
</script>

HTMLをマークアップする

あとは、テンプレートカスタマイズもしくは、投稿画面から以下のようになるように、HTMLをマークアップします。

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

投稿画面などからマークアップを記入するときは、余分な改行が入ると<p></p>タグなどが挿入されて、動作しなくなるので注意が必要です。

まとめ

jQuery lightgalleryは、読み込むファイルは多いですが、結構簡単に高機能画像ギャラリーを作成することができます。

ただ、WordpressでLightbox的な機能（本文中の画像を拡大表示する機能）として利用するには向いていません。というか、やろうと思ったら動作しませんでした。

とりあえず、「手軽に高機能なギャラリーサイトを作りたい」なんて場合には、便利なjQueryプラグインだと思います。