サイトをリニューアルする際、サムネイルをクリックすると拡大するタイプのギャラリープラグインを導入したくて試してみました。
デモページ
Luminousには以下のようなメリットがあります。
- 画像下部にコメントが付けられる
- jQuery不要で シンプルかつ軽量
- モバイル対応
参考資料：lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法
ここよりも基本から丁寧に解説されているので、ぶっちゃけ上記サイトを読めば十分な気もします。が、サイトには解説にないコードの組み合わせで実装したかったのでまとめておきます。
STEP1: ファイルの入手
Githubからzipファイルをダウンロード。今回はdistフォルダ内の『luminous-basic.min.css』と『luminous.min.js』を使用します。
メモ：.minが付いているものと付いていないものの違い
ファイルサイズを軽くするために余分な空白と改行を取り除いたものが「.min」。
ソースコードを開いて直接編集しない場合に利用すると良い。
STEP2：CSSとjsファイルの読み込み
</body>直前に、Luminousを読み込むコードを記述します。
<link rel="stylesheet" href="【luminous-basic.min.cssのURL】">
<script src="【luminous.min.jsのURL】"></script>これでLuminous導入の準備ができました。
CASE1: 単数ギャラリー
基本を確認するために一番シンプルなケースを試します。
ここでは、class属性に「luminous」という値を指定した<a>要素をクリックしたときにLuminousが発動するようにします。
htmlの記述は、以下の通り。
<a href="【拡大表示させたい画像のURL】" class="luminous">
<img src="【サムネイル画像のURL】">
</a>次に、luminous.min.jsを読み込んだあとの<script>タグ内に
var luminousTrigger = document.querySelector('.luminous');
if( luminousTrigger !== null ) {
new Luminous(luminousTrigger);
}これで、サムネイル画像をクリックするといい感じのアニメーションと共に画像を拡大表示させることができます。
CASE2: 複数ギャラリー（キャプションと矢印ナビゲーション付き）
複数枚の画像に適用するときは「 LuminousGallery 」を使用します。さらにサムネイル画像のalt属性をキャプションとして表示させる場合は以下のようにします。
<a href="【画像１のURL】" class="luminous"><img src="【画像１のサムネイルのURL】" alt="【画像１のキャプション】"></a>
<a href="【画像２のURL】" class="luminous"><img src="【画像２のサムネイルのURL】" alt="【画像２のキャプション】"></a>
... var luminousTrigger = document.querySelectorAll('.luminous');
var options = {
caption: function(trigger) {
return trigger.querySelector('img').getAttribute('alt');
},
}
if (luminousTrigger !== null) {
new LuminousGallery(luminousTrigger, {}, options);
}CASE3: 複数ギャラリー（矢印ナビゲーションなし）
CASE2のままでも良いのですが、個人的に矢印ナビゲーションが微妙だったので、キャプション機能は残したまま『単数用のLuminousをループさせる』方法を適用しました。
<a href="【画像１のURL】" class="luminous"><img src="【画像１のサムネイルのURL】" alt="【画像１のキャプション】"></a>
<a href="【画像２のURL】" class="luminous"><img src="【画像２のサムネイルのURL】" alt="【画像２のキャプション】"></a>
... var luminousTrigger = document.querySelectorAll('.luminous');
var options = {
caption: function(trigger) {
return trigger.querySelector('img').getAttribute('alt');
},
}
for (var i = 0; i < luminousTrigger.length; i++) {
var elem = luminousTrigger[i];
new Luminous(elem, options);
}