Pickupニュース

lightGallery
jQueryプラグイン

lightGallery

多機能lightbox系のjQueryプラグイン
lightGalleryは非常に豊富なオプション設定が用意されているlightbox系(サムネイル画像をクリックしてモーダルウィンドウを開き、拡大して表示)のjQueryプラグインです。他の同類のプラグインと比較しても、スマートフォンでのスワイプ操作、ページ履歴でブラウザの「戻る」「進む」に対応、画像の拡大・縮小・ダウンロードなど、その多機能性は追随を許しません。
1 lightGalleryの導入と基本設定
バージョン: 1.3.5をベースにレビューしています。

lightGalleryのライセンス

個人利用は無料のオープンソースとして利用することが出来ますが、商用利用する場合は別途費用がかかります。
lightGallery: Support

lightGalleryの主な特徴

  • レスポンシブ対応
  • プラグインで機能拡張
  • モバイルデバイスのタッチ操作サポート
  • デスクトップPCのマウスドラッグサポート
  • ダブルクリック/ダブルタップで画像のオリジナルサイズを表示
  • サムネイルをアニメーション表示
  • Youtube、Vimeo、Dailymotion、VK、HTML5 ビデオをサポート
  • 20以上のCSS3トランジション
  • ダイナミックモード対応
  • フルスクリーンサポート
  • ズームサポート
  • ブラウザの履歴を管理するAPI
  • レスポンシブ画像
  • iframeのサポート
  • 1ページに複数のインスタンス
  • CSS(SCSS)と設定で簡単にカスタマイズ
  • スマートイメージのプリロードとコードの最適化
  • デスクトップのキーボードナビゲーション
  • アイコンフォントのサポート

lightGalleryのリンク(ファイルをダウンロードして利用する場合)

リンク先のClone or downloadDownload ZIPをクリックして、ファイルをダウンロードします。

Webサイト

lightGalleryの準備(基本)

lightGalleryという名前のフォルダを新規作成し、そこにダウンロード・解凍後の lightGallery-masterdist フォルダの中からcssfontsimgjsフォルダを移動します。

HTMLマークアップ

サーバーにlightGalleryフォルダをアップロードし、<head>タグ内にlightgallery.js(またはlightgallery.min.js)とjQueryまでのスクリプトパス、lightgallery.css(またはlightgallery.min.css)までのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/lightGallery/js/lightgallery.js"></script> <link rel="stylesheet" href="path/lightGallery/css/lightgallery.css" />

lightGalleryの準備(拡張)

後述しますが、lightGalleryは、各種機能をプラグインjavaScriptファイルを追加して、拡張することが出来ます。その全ての機能を使用する場合、上記作成したlightGalleryフォルダjsフォルダに lightGallery-masterlib フォルダの中からのlightgallery-all.js(またはlightgallery-all.min.js)を追加します。

HTMLマークアップ

lightgallery-all.js(またはlightgallery-all.min.js)までのスクリプトパスに変更します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/lightGallery/lightgallery-all.js"></script> <link rel="stylesheet" href="path/lightGallery/lightgallery.css" />

lightGalleryのリンク(CDNを利用する場合)

lightGalleryはCDNサービスcdnjでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているlightgallery.js(またはlightgallery.min.js)とjQueryまでのスクリプトパス、lightgallery.css(またはlightgallery.min.css)までのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.5/js/lightgallery.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.5/css/lightgallery.css" />

基本的な使い方

lightGalleryは複数の指定方法で実行することが出来ます。

グループ内直下のリンク要素を指定

複数のサムネイル<a>タグ要素を、1つの親要素にグループとしてまとめて、lightGalleryを実行します。

HTMLマークアップ

lightGalleryで親要素にクラス名、またはID名(ここではlightgallery)を付加します。リンク要素は必ず、親要素の直下に置いて下さい。
HTMLCopy
<div class="lightgallery"> <a href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a> <a href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a> <a href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a> <a href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a> <a href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></a> <a href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></a> <a href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></a> <a href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></a> </div>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.lightgallery').lightGallery();

デモ


        <div class="lightgallery">
            <a href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a>
            <a href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a>
            <a href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a>
            <a href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a>
            <a href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></a>
            <a href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></a>
            <a href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></a>
            <a href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></a>
        </div>
    

        $(function () {
            $('.lightgallery').lightGallery();
        });
    


グループ内直下の非リンク要素を指定

親要素の直下が<a>タグ以外の非リンク要素を対象にlightGalleryを実行します。

HTMLマークアップ

親要素の<ul>タグにクラス名、またはID名(ここではlightgallery)を付加し、直下の<li>タグにリンク属性としてdata-srcを追加します。
HTMLCopy
<ul class="lightgallery"> <li data-src="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></li> <li data-src="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></li> <li data-src="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></li> <li data-src="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></li> <li data-src="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></li> <li data-src="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></li> <li data-src="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></li> <li data-src="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></li> </ul>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.lightgallery').lightGallery();

デモ


        <ul class="lightgallery">
            <li data-src="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></li>
            <li data-src="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></li>
            <li data-src="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></li>
            <li data-src="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></li>
            <li data-src="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></li>
            <li data-src="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></li>
            <li data-src="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></li>
            <li data-src="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></li>
        </ul>
    

        .lightgallery {
            margin: 0;
            padding: 0;
        }
        .lightgallery li{
            display: inline;
            cursor: pointer;
        }    
    

        $(function () {
            $('.lightgallery').lightGallery();
        });
    


グループ内階層下のクラスを指定

上記までの方法では、親要素直下のリンク/非リンク要素を対象にlightGalleryを実行しますが、グループ内が階層化されていると使用することが出来ません。その場合は、lightGalleryを実行したい対象をselectorオプションで指定します。

HTMLマークアップ

lightGalleryを実行したい対象にクラス名(ここではitem)を付加します。
HTMLCopy
<div class="lightgallery"> <div> <a class="item" href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a> </div> <div> <a class="item" href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a> </div> <div> <a class="item" href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a> </div> <div> <a class="item" href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a> </div> <ul> <li class="item" href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></li> <li class="item" href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></li> <li class="item" href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></li> <li class="item" href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></li> </ul> </div>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.lightgallery').lightGallery({ selector: '.item' });

デモ


        <div class="lightgallery">
            <div>
                <a class="item" href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a>
            </div>
            <div>
                <a class="item" href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a>
            </div>
            <div>
                <a class="item" href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a>
            </div>
            <div>
                <a class="item" href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a>
            </div>        
            <ul>
                <li class="item" href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></li>
                <li class="item" href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></li>
                <li class="item" href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></li>
                <li class="item" href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></li>
            </ul>
        </div>
    

        .lightgallery div{
            display: inline;
        }
        .lightgallery ul{
            margin: 0;
            padding: 0;
        }
        .lightgallery li{
            display: inline;
            cursor: pointer;
        }    
    

        $(function () {
            $('.lightgallery').lightGallery({
                selector: '.item'
            });
        });
    

非グループで個別に指定

上記までは、親要素を指定してlightGalleryを実行していましたが、実行対象を個別に直接指定することが出来ます。

HTMLマークアップ

直接lightGalleryを実行したい要素にクラス名(ここではlightgallery)を付加します。
HTMLCopy
<a class="lightgallery" href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a> <a class="lightgallery" href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a> <a class="lightgallery" href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a> <a class="lightgallery" href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a> <a class="lightgallery" href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></a> <a class="lightgallery" href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></a> <a class="lightgallery" href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></a> <a class="lightgallery" href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></a>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.lightgallery').lightGallery({ selector: 'this' });

デモ


        <a class="lightgallery" href="../images/photo01.jpg" title="これはLightGalleryのサンプル(1)です。"><img src="../images/photo01-s.jpg"></a>
        <a class="lightgallery" href="../images/photo02.jpg" title="これはLightGalleryのサンプル(2)です。"><img src="../images/photo02-s.jpg"></a>
        <a class="lightgallery" href="../images/photo03.jpg" title="これはLightGalleryのサンプル(3)です。"><img src="../images/photo03-s.jpg"></a>
        <a class="lightgallery" href="../images/photo04.jpg" title="これはLightGalleryのサンプル(4)です。"><img src="../images/photo04-s.jpg"></a>
        <a class="lightgallery" href="../images/photo05.jpg" title="これはLightGalleryのサンプル(5)です。"><img src="../images/photo05-s.jpg"></a>
        <a class="lightgallery" href="../images/photo06.jpg" title="これはLightGalleryのサンプル(6)です。"><img src="../images/photo06-s.jpg"></a>
        <a class="lightgallery" href="../images/photo07.jpg" title="これはLightGalleryのサンプル(7)です。"><img src="../images/photo07-s.jpg"></a>
        <a class="lightgallery" href="../images/photo08.jpg" title="これはLightGalleryのサンプル(8)です。"><img src="../images/photo08-s.jpg"></a>
    

        $(function () {
            $('.lightgallery').lightGallery({
                selector: 'this'
            });
        });
    
1 2 3 4 5 6 7 8 9 10

1 件のコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください