1. このページの目的
画像をポップアップ表示する JavaScript ライブラリである luminous を使ってみる。
このライブラリの最大の特徴は、jQuery を必要としない ことである。
2. 1つの画像を単独でポップアップ表示する場合
デモ
コード
関連箇所のみ抜粋
<html>
<head>
...
<link rel="stylesheet" href="path/to//luminous-basic.min.css">
...
</head>
<body>
...
<a href="foo.jpg" data-luminous-single>
<img src="foo.jpg" width="200" alt="Foo">
</a>
...
<script src="path/to/Luminous.min.js"></script>
<script>
const luminousOpts = {
caption: (trigger) => {
return trigger.querySelector("img").getAttribute("alt");
}
};
new Luminous(
document.querySelector("a[data-luminous-single]"),
luminousOpts
);
</script>
</body>
</html>
ポイント
- ここでは
data-luminous-single属性を使って、対象となるa要素を取得しているが、a要素が取得できるなら どんなやり方でもよい。 Luminousクラスのコンストラクタでは、第二引数でオプションを指定することができる。ここではキャプションを表示する関数を指定しているが、実際はもっといろいろなオプションがある。
こちらの方式で、複数の画像に対してポップアップ表示の設定を行いたい場合は、例えば以下のコードで実現可能である。
コード
document.querySelectorAll("a[data-luminous]").forEach((elm) => {
new Luminous(elm, luminousOpts);
});
3. 複数の画像をギャラリースタイルでポップアップ表示する場合
こちらの方法だと、ポップアップ表示した状態で複数の画像を移動することができる。
デモ
コード
関連箇所のみ抜粋
<html>
<head>
...
<link rel="stylesheet" href="path/to//luminous-basic.min.css">
...
</head>
<body>
...
<a href="foo.png" data-luminous-multi>
<img src="foo.png" width="110" alt="Foo">
</a>
<a href="bar.png" data-luminous-multi>
<img src="bar.png" width="100" alt="Bar">
</a>
<a href="baz.png" data-luminous-multi>
<img src="baz.png" width="130" alt="Baz">
</a>
...
<script src="path/to/Luminous.min.js"></script>
<script>
const luminousOpts = {
caption: (trigger) => {
return trigger.querySelector("img").getAttribute("alt");
}
};
const galleryOpts = {
arrowNavigation: true
};
new LuminousGallery(
document.querySelectorAll("a[data-luminous-multi]"),
galleryOpts,
luminousOpts
);
</script>
</body>
</html>
ポイント
- ここでは
data-luminous-multi属性を使って、対象となるa要素を取得しているが、a要素が取得できるなら どんなやり方でもよい。 LuminousGalleryクラスのコンストラクタでは、第二引数と第三引数でオプションを指定することができる。第三引数は先程のLuminousクラスのコンストラクタで指定したオプションと同じであり、第二引数はこちらのクラス独自のオプションである。