Luminousは、画像をクリックするとふわっと拡大してくれるLightbox系のJavaScriptスクリプトです。jQueryに依存せず単体で動作します。
Luminousの使い方
Luminousの使い方は、WEMOさんの記事で詳細に解説されていますので、詳しくはそちらをご参照ください。複数枚の画像に対応させる方法など、参考にさせていただきました。
ステップ1. Luminousのダウンロードと設置
GitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、以下のファイルをサーバー上に設置します。
- dist/Luminous.min.js
- dist/luminous-basic.min.css
HTMLの<head>～</head>内に以下を追加して、ファイルを読み込みます。
<link rel="stylesheet" href="css/luminous-basic.min.css"> <script src="js/Luminous.min.js"></script>
ファイルパスは適宜変更してください。また、Luminous.min.jsの方は</body>の直前に記述してもOKです。
ステップ2. 画像のマークアップ
画像のマークアップは、以下のようにします。
<a href="拡大画像" class="lightbox"> <img src="拡大前の画像" alt=""> </a>
a要素に”lightbox”というクラスを追加していますが、任意のクラス名に変更してもらって大丈夫です。
ステップ3. Luminousの実行
最後に、以下のスクリプトを</body>の直前に追加してLuminousを実行します。
<script>
var luminousTrigger = document.querySelector('.lightbox');
if( luminousTrigger !== null ) {
new Luminous(luminousTrigger);
}
</script>
a要素にlightboxというクラスが付いていたら、画像が拡大表示されます。
ただ上記の場合、ページ内の画像1枚にしか対応できません。ページ内に設置する画像が1枚のみでしたら、上記のままで大丈夫ですが、複数枚に対応させるにはLuminousGalleryを使います。
<script>
var luminousTrigger = document.querySelectorAll('.lightbox');
if( luminousTrigger !== null ) {
new LuminousGallery(luminousTrigger);
}
</script>
LuminousGalleryを使うと画像を拡大した時に矢印が表示されます。複数枚に対応しつつ矢印を消したい場合は、以下のようにします。
<script>
var luminousTrigger = document.querySelectorAll('.lightbox');
for (var i = 0; i < luminousTrigger.length; i++) {
var elem = luminousTrigger[i];
new Luminous(elem);
}
</script>
一応arrowNavigationというオプションも用意されているのですが、値をfalseにしても矢印が消えなかったので、こちらの方が確実かと思います。
Luminousのオプション
Luminousには様々なオプションも用意されています。オプションを指定する場合は、以下のようにスクリプトを記述しましょう。
<script>
var options = {
namespace: null, //拡大画像に追加するクラス名
sourceAttribute: 'href', //拡大画像を指定する要素
caption: null, //キャプション
openTrigger: 'click', //画像を拡大するアクション
closeTrigger: 'click', //拡大画像を閉じる時のアクション
closeWithEscape: true, //[esc]キーで拡大画像を閉じる
closeOnScroll: false, //スクロールで拡大画像を閉じる
appendToSelector: 'body', //拡大画像の挿入位置
onOpen: null, //拡大画像を開く時に呼び出す関数
onClose: null, //拡大画像を閉じる時に呼び出す関数
};
var luminousTrigger = document.querySelector('.lightbox');
if( luminousTrigger !== null ) {
new Luminous(luminousTrigger, options);
}
</script>
複数枚の画像に対応しつつ、alt属性をキャプションにする場合は以下のように記述します。
<script>
var options = {
caption: function (trigger) {
return trigger.querySelector('img').getAttribute('alt');
},
}
var luminousTrigger = document.querySelectorAll('.lightbox');
if( luminousTrigger !== null ) {
new LuminousGallery(luminousTrigger, {}, options);
}
</script>
あとがき
単体で動作するスクリプトなのに、オプションも豊富ですね。軽量で使いやすいので、jQueryが使えない環境などでLightbox系の動作を取り入れたい時は、ぜひ導入をご検討ください。