jQueryライブラリを使用して、簡単画像ギャラリーページの実装

こんにちは、樋口です。

今回は、画像ギャラリーを簡単に実装できる、「lightgallery.js」についてご紹介します。
※ 「lightgallery.js」のライセンスはApache Licnese 2.0となります。

ライブラリの入手

lightgallery.jsは下記サイトよりダウンロードできます。
lightgallery.jsダウンロード(GitHab)

本ライブラリを使用する為、ダウンロードしたZIP内にある「dist」フォルダの中身すべてを持ってきます。

これで準備は完了です。

フォルダ階層

今回は、lightgallery.jsのダウンロードサイトよりダウンロードした、フォルダーをそのまま配置しています。
下記フォルダ階層でサンプルの作成をしていきます。

HTMLファイル

初めに、HTMLファイルを作成します。

– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>lightgallery.jsサンプル</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="./css/lightgallery.css" /> 
	
    <style type="text/css">
    <!--
	    .container {
          width: 1160px;
          margin: 0 auto;
          padding: 50px 40px;
          box-sizing: border-box;
        }
		.tatle-style {
          margin: 0 0 50px;
          padding-bottom: 15px;
          border-bottom: 1px solid #eeeeee;
        }
    -->
    </style>
  </head>
  <body>  
    <div id="wrap">
      <div class="container">
        <div class="col-lg-12">
          <div class="form-group">
            <h1 class="tatle-style">lightgallery.jsサンプル</h1>
          </div>
          <div class="form-group">
            <span></span>
          </div>
          <form class="form-signin" id="commentForm">
            <div class="col-lg-12">
              <div class="form-group" id="lightgallery_sample">
                  <a href="./img/main1.png">
                    <img src="./img/small1.png" />
                  </a>
                  <a href="./img/main2.png">
                    <img src="./img/small2.png" />
                  </a>
                  <a href="./img/main3.png">
                    <img src="./img/small3.png" />
                  </a>
                  <a href="./img/main4.png">
                    <img src="./img/small4.png" />
                  </a>
                  <a href="./img/main5.png">
                    <img src="./img/small5.png" />
                  </a>
                  <a href="./img/main6.png">
                    <img src="./img/small6.png" />
                  </a>
                  <a href="./img/main7.png">
                    <img src="./img/small7.png" />
                  </a>
                  <a href="./img/main8.png">
                    <img src="./img/small8.png" />
                  </a>
                  <a href="./img/main9.png">
                    <img src="./img/small9.png" />
                  </a>
                  <a href="./img/main10.png">
                    <img src="./img/small10.png" />
                  </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/lightgallery.min.js"></script>
    <script src="./js/test.js"></script>
  </body>
</html>

10行目：
　lightgalleryで使用するCSSを読み込みます。

41行目：
　画像クリック時に表示される、メイン画像のパスを指定しています。

42行目：
　初期表示時に表示される画像のパスを指定しています。
　今回は、クリック後の画像より小さいサイズの画像を用意し指定しています。

44～70行目：
　41行目、42行目で指定したように、各画像を指定していきます。

78行目：
　lightgalleryのメインとなる、JSファイルを読み込みます。

以上で、HTMLは完成です。
次に、画像ギャラリー機能をONにするための、javaScriptについて説明します。

javaScriptファイル

次に、ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

(function(){
	lightGallery(document.getElementById('lightgallery_sample')); 
})();

2行目：
　「lightGallery(document.getElementById(‘lightgallery_sample’))」を呼び出すことにより画像ギャラリー機能がONとなります。

実行結果

最後に、実行イメージを下記に載せます。

– 起動時

– 1枚目画像クリック

– 次へボタンクリック

最後に

今回紹介したライブラリを使用すると、画像ギャラリーが簡単に実装できます。
機会ありましたら、是非試してみてください！
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。

《関連記事》
jQueryライブラリを使用して、簡単Form項目の入力チェック実装
jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装
jQueryライブラリを使用して、テーブル内のデータをXLS/XLSX/CSV/TEXT形式で簡単ダウンロード