1 lightGalleryの導入と基本設定
バージョン: 1.3.5をベースにレビューしています。
lightGalleryのライセンス
個人利用は無料のオープンソースとして利用することが出来ますが、商用利用する場合は別途費用がかかります。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)までのスタイルシートパスへリンクする記述を追加します。<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)までのスクリプトパスに変更します。<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="../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に以下のような記述を追加します。$('.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
を追加します。<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に以下のような記述を追加します。$('.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
)を付加します。<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に以下のような記述を追加します。$('.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
)を付加します。<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に以下のような記述を追加します。$('.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'
});
});
[…] lightGalleryのYouTubeサムネイルを表示するデモをCodePenで作成していたのですが、作成時には問題なくても、埋め込み時に正しく機能しない(サムネイルが表示されない)事態が発生しまし […]