lightGallery - (1) lightGalleryの導入と基本設定多機能lightbox系のjQueryプラグイン
lightGalleryは非常に豊富なオプション設定が用意されているlightbox系（サムネイル画像をクリックしてモーダルウィンドウを開き、拡大して表示）のjQueryプラグインです。他の同類のプラグインと比較しても、スマートフォンでのスワイプ操作、ページ履歴でブラウザの「戻る」「進む」に対応、画像の拡大・縮小・ダウンロードなど、その多機能性は追随を許しません。
バージョン: 1.3.5をベースにレビューしています。
lightGalleryのライセンス
個人利用は無料のオープンソースとして利用することが出来ますが、商用利用する場合は別途費用がかかります。lightGalleryの主な特徴
- レスポンシブ対応
- プラグインで機能拡張
- モバイルデバイスのタッチ操作サポート
- デスクトップPCのマウスドラッグサポート
- ダブルクリック/ダブルタップで画像のオリジナルサイズを表示
- サムネイルをアニメーション表示
- Youtube、Vimeo、Dailymotion、VK、HTML5 ビデオをサポート
- 20以上のCSS3トランジション
- ダイナミックモード対応
- フルスクリーンサポート
- ズームサポート
- ブラウザの履歴を管理するAPI
- レスポンシブ画像
- iframeのサポート
- 1ページに複数のインスタンス
- CSS（SCSS）と設定で簡単にカスタマイズ
- スマートイメージのプリロードとコードの最適化
- デスクトップのキーボードナビゲーション
- アイコンフォントのサポート
lightGalleryのリンク（ファイルをダウンロードして利用する場合）
リンク先のClone or download › Download ZIPをクリックして、ファイルをダウンロードします。
-
- lightGalleryのダウンロード
lightGalleryの準備（基本）
lightGalleryという名前のフォルダを新規作成し、そこにダウンロード・解凍後の lightGallery-masterdist フォルダの中からcss、fonts、img、jsフォルダを移動します。-
- lightGalleryの準備
HTMLマークアップ
サーバーにlightGalleryフォルダをアップロードし、<head>タグ内にlightgallery.js（またはlightgallery.min.js）とjQueryまでのスクリプトパス、lightgallery.css（またはlightgallery.min.css）までのスタイルシートパスへリンクする記述を追加します。
<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）を追加します。-
- lightGalleryの準備（拡張）
HTMLマークアップ
lightgallery-all.js（またはlightgallery-all.min.js）までのスクリプトパスに変更します。<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）までのスタイルシートパスへリンクする記述を追加します。
<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）を付加します。リンク要素は必ず、親要素の直下に置いて下さい。
<div class="lightgallery">
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01.jpg" title="これはLightGalleryのサンプル（1）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02.jpg" title="これはLightGalleryのサンプル（2）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03.jpg" title="これはLightGalleryのサンプル（3）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04.jpg" title="これはLightGalleryのサンプル（4）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05.jpg" title="これはLightGalleryのサンプル（5）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06.jpg" title="これはLightGalleryのサンプル（6）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07.jpg" title="これはLightGalleryのサンプル（7）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07-thumb.jpg"></a>
<a href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08.jpg" title="これはLightGalleryのサンプル（8）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08-thumb.jpg"></a>
</div>JavaScriptの記述
JavaScriptに以下のような記述を追加します。$('.lightgallery').lightGallery();デモ
See the Pen lightGallery: Select 1 by JaSTIN (@JaSTIN) on CodePen.24295
グループ内直下の非リンク要素を指定
親要素の直下が<a>タグ以外の非リンク要素を対象にlightGalleryを実行します。
HTMLマークアップ
親要素の<ul>タグにクラス名、またはID名（ここではlightgallery）を付加し、直下の<li>タグにリンク属性としてdata-srcを追加します。
<ul class="lightgallery">
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01.jpg" title="これはLightGalleryのサンプル（1）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02.jpg" title="これはLightGalleryのサンプル（2）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03.jpg" title="これはLightGalleryのサンプル（3）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04.jpg" title="これはLightGalleryのサンプル（4）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05.jpg" title="これはLightGalleryのサンプル（5）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06.jpg" title="これはLightGalleryのサンプル（6）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07.jpg" title="これはLightGalleryのサンプル（7）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07-thumb.jpg"></li>
<li data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08.jpg" title="これはLightGalleryのサンプル（8）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08-thumb.jpg"></li>
</ul>JavaScriptの記述
JavaScriptに以下のような記述を追加します。$('.lightgallery').lightGallery();デモ
See the Pen lightGallery: Select 2 by JaSTIN (@JaSTIN) on CodePen.24295
グループ内階層下のクラスを指定
上記までの方法では、親要素直下のリンク/非リンク要素を対象にlightGalleryを実行しますが、グループ内が階層化されていると使用することが出来ません。その場合は、lightGalleryを実行したい対象をselectorオプションで指定します。
HTMLマークアップ
lightGalleryを実行したい対象にクラス名（ここではitem）を付加します。
<div class="lightgallery">
<div class="box">
<a class="item" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01.jpg" title="これはLightGalleryのサンプル（1）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01-thumb.jpg"></a>
</div>
<div class="box">
<a class="item" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02.jpg" title="これはLightGalleryのサンプル（2）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02-thumb.jpg"></a>
</div>
<div class="box">
<a class="item" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03.jpg" title="これはLightGalleryのサンプル（3）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03-thumb.jpg"></a>
<div class="box">
<a class="item" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04.jpg" title="これはLightGalleryのサンプル（4）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04-thumb.jpg"></a>
</div>
<div class="box">
<ul>
<li class="item" data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05.jpg" title="これはLightGalleryのサンプル（5）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05-thumb.jpg"></li>
<li class="item" data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06.jpg" title="これはLightGalleryのサンプル（6）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06-thumb.jpg"></li>
<li class="item" data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07.jpg" title="これはLightGalleryのサンプル（7）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07-thumb.jpg"></li>
<li class="item" data-src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08.jpg" title="これはLightGalleryのサンプル（8）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08-thumb.jpg"></li>
</ul>
</div>
</div>JavaScriptの記述
JavaScriptに以下のような記述を追加します。$('.lightgallery').lightGallery({
selector: '.item'
});デモ
See the Pen lightGallery: Select 3 by JaSTIN (@JaSTIN) on CodePen.24295
非グループで個別に指定
上記までは、親要素を指定してlightGalleryを実行していましたが、実行対象を個別に直接指定することが出来ます。HTMLマークアップ
直接lightGalleryを実行したい要素にクラス名（ここではlightgallery）を付加します。
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01.jpg" title="これはLightGalleryのサンプル（1）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo01-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02.jpg" title="これはLightGalleryのサンプル（2）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo02-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03.jpg" title="これはLightGalleryのサンプル（3）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo03-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04.jpg" title="これはLightGalleryのサンプル（4）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo04-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05.jpg" title="これはLightGalleryのサンプル（5）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo05-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06.jpg" title="これはLightGalleryのサンプル（6）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo06-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07.jpg" title="これはLightGalleryのサンプル（7）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo07-thumb.jpg"></a>
<a class="lightgallery" href="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08.jpg" title="これはLightGalleryのサンプル（8）です。"><img src="https://dl.dropboxusercontent.com/u/223439/cdn/gallery/photo08-thumb.jpg"></a> JavaScriptの記述
JavaScriptに以下のような記述を追加します。$('.lightgallery').lightGallery({
selector: '.item'
});デモ
See the Pen lightGallery: Select 4 by JaSTIN (@JaSTIN) on CodePen.24295
Pingback: CodePenでJavaScriptの読み込み順エラー | Web技術指南書