Pickupニュース

ホーム » jQuery » jQueryプラグイン » lightGallery
lightGallery
jQueryプラグイン

lightGallery

多機能lightbox系のjQueryプラグイン
2016年11月15日 1件 jQuery, lightbox, lightGallery, プラグイン
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 download › Download ZIPをクリックして、ファイルをダウンロードします。

Webサイト

lightGalleryの準備（基本）

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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

記事ランキング