クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方

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系の動作を取り入れたい時は、ぜひ導入をご検討ください。

クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方