ラボラジアン 1. はじめに
ウェブページ上の画像をポップアップ表示する JavaScript ライブラリである Luminous の使い方について説明します。
Luminous の最大の特徴は、「jQuery を必要としない」ことにあります。例えば、本サイトでも使っている有名な Lightbox は jQuery に依存しています。
2. 事前準備
Luminous は npm モジュールとしてインストールすることもできますが、本記事ではダウンロードして使うことにします。
ということで、ダウンロード から ZIPファイルをダウンロードして展開（解凍）しておきます。
展開したうち、今回使用するのは以下の 2つのファイルになります。
dist/Luminous.min.jsdist/luminous-basic.min.css
3. 1つの画像を単独でポップアップ表示する場合
以下にコード例を示します。
<html>
<head>
...
<!-- CSSファイルを読み込みます -->
<link rel="stylesheet" href="path/to//luminous-basic.min.css">
...
</head>
<body>
...
<!-- この画像をポップアップ表示できるようにします -->
<!-- data-luminous 属性をセットして、後からこの要素を取得できるようにします -->
<a href="foo.jpg" data-luminous>
<img src="foo.jpg" width="200" alt="Foo">
</a>
...
<!-- JavaScriptファイルを読み込みます -->
<script src="path/to/Luminous.min.js"></script>
<script>
// オプションを表すオブジェクトを用意します
const luminousOpts = {
// ポップアップした画像にキャプションを表示させます
caption: (trigger) => {
return trigger.querySelector("img").getAttribute("alt");
}
};
// Luminous オブジェクトを生成することでポップアップ表示できます
new Luminous(
// 第一引数：ポップアップ表示したい <a>要素
document.querySelector("a[data-luminous]"),
// 第二引数：オプション
luminousOpts
);
</script>
</body>
</html>
Luminousクラスのオブジェクトを生成することで、特定の<a>タグ（の中の<img>タグ）がポップアップ表示できるようになります。Luminousコンストラクタの第一引数に、対象となるa要素をセットしています。ここでは、data-luminousという独自の属性を利用していますが、CSSクラスを使うなど他の方法でも構いません。- 続いて第二引数ではオプションを指定します。ここでは、ポップアップした画像の下にキャプションを表示するための関数をオプションにセットしています。
<img>タグのalt属性値がキャプションに使われるようにしてあります。
また、複数の画像に対して、個別にポップアップ表示をさせたい場合は、例えば以下のコードで実現可能です。
document.querySelectorAll("a[data-luminous]").forEach((elm) => {
new Luminous(elm, luminousOpts);
});
4. 複数の画像をギャラリースタイルでポップアップ表示する場合
こちらの方法だと、ポップアップ表示した状態で複数の画像を連続して表示（移動）することができます（ギャラリースタイル）。
以下にコード例を示します。
<html>
<head>
...
<!-- CSSファイルを読み込みます -->
<link rel="stylesheet" href="path/to//luminous-basic.min.css">
...
</head>
<body>
...
<!-- 下の3つの画像をギャラリースタイルでポップアップ表示できるようにします -->
<!-- data-luminous 属性をセットして、後からこれらの要素を取得できるようにします -->
<a href="foo.png" data-luminous>
<img src="foo.png" width="110" alt="Foo">
</a>
<a href="bar.png" data-luminous>
<img src="bar.png" width="100" alt="Bar">
</a>
<a href="baz.png" data-luminous>
<img src="baz.png" width="130" alt="Baz">
</a>
...
<!-- JavaScriptファイルを読み込みます -->
<script src="path/to/Luminous.min.js"></script>
<script>
// オプションを表すオブジェクトを用意します（先程と同じです）
const luminousOpts = {
caption: (trigger) => {
return trigger.querySelector("img").getAttribute("alt");
}
};
// ギャラリースタイル専用のオプションを表すオブジェクトを用意します
const galleryOpts = {
arrowNavigation: true
};
// LuminousGallery オブジェクトを生成することでポップアップ表示できます
new LuminousGallery(
// 第一引数：ポップアップ表示する<a>要素（複数可）
document.querySelectorAll("a[data-luminous]"),
// 第二引数：ギャラリー用オプション
galleryOpts,
// 第三引数：オプション
luminousOpts
);
</script>
</body>
</html>
-
LuminousGalleryクラスのオブジェクトを生成することで、複数の<a>タグ（の中の<img>タグ）をギャラリースタイルでポップアップ表示できるようになります。 LuminousGalleryコンストラクタの第一引数に、対象となるa要素をセットしています。ここでは、data-luminousという独自の属性を利用していますが、CSSクラスを使うなど他の方法でも構いません。- 続いて第二引数はギャラリースタイル用オプションです。ここでは、矢印キーで「次」「前」の画像に移動できるようにしています。
- 続いて第三引数はそれ以外の普通のオプションです。ポップアップした画像の下にキャプションを表示するための関数をオプションにセットしています。
<img>タグのalt属性値がキャプションに使われるようにしてあります。
5. デモページ
デモページを作りました。
デモページ
? Luminous を使ってみる
jQueryに依存しないギャラリーを作りたくて検索して、こちらにたどり着きました。
ありがとうございます！とても参考になります。
ギャラリースタイルで、矢印を初期の＞と＜から、任意の(自分で用意した)画像に変更する事は出来ますでしょうか？
arrowNavigationもしくはギャラリー用オプションに何か追加するのかな…、と調べていたのですが分からなかったので質問を失礼致しました。
よろしくお願い致します。
こんにちは！
ちょっと見てみたのですが、オプションにはないようです。
そして、矢印の部分は CSSで表現されていました。
（borderプロパティで線を表示し、transform プロパティで向きを傾けているようです）
具体的には、luminous-basic.css ファイル内の以下のあたりです。
(1) .lum-gallery-button:after の border-top プロパティ （共通）
(2) .lum-previous-button:after の border-left プロパティ
(3) .lum-next-button:after の border-right プロパティ
(ソースコード：
https://github.com/imgix/luminous/blob/master/src/css/luminous-basic.css#L229
https://github.com/imgix/luminous/blob/master/src/css/luminous-basic.css#L239
https://github.com/imgix/luminous/blob/master/src/css/luminous-basic.css#L247)
ですので、この部分を変更すれば実現できるかもしれません（background-image プロパティで画像URLを指定するなど）。
それから、luminous-basic.css ファイルは圧縮されているかもしれませんが、
https://unminify.com/ などのサービスを使うと元に戻せます。
逆に圧縮するには https://csscompressor.com/ などが使えます。
ちゃんと表示／非表示が効くかなど少し不安な部分もありますが、よろしければ参考にしてください。
返信・丁寧なご教授ありがとうございます！
border関連の指定を非表示(none)にして、content:” “(無ければ追加)で指定出来るか試してみますね。
luminous-basic.cssの圧縮の事もお気遣いありがとうございます。
あまりに簡単に実装できてワロタ
ただホムペほんとの初心者だとこのままコピペして「できん！」とか言いそう
階層・パス・名前の指定は任意
あと(“a[data-luminous]”)をクラス名にする場合は(“.クラス名”)に
補足ありがとうございます。
これ、簡単に利用できて便利ですよね。