写真 ブログ 開発室
HOME開発室JavaScript[JavaScript] Luminous.jsのキャプションにリンクを入れる
キーワード
JavaScript

[JavaScript] Luminous.jsのキャプションにリンクを入れる

[JavaScript] Luminous.jsのキャプションにリンクを入れる

Luminous.jsとは

Luminous.jsはピュアなJavaScriptで書かれた軽量な画像ポップアップライブラリだ。 単体画像のポップアップ表示と複数画像のギャラリー表示に対応している。 詳しく知りたい人はネット上に情報があるので検索してみてもらいたい。

Googleで検索Luminous.js

Luminous.jsのキャプションにリンクを入れたい

Luminous.jsでは初期化時のパラメータを以下のように設定することで、画像の下部に独自のキャプションを表示することができる。

JavaScript
let elements = this.querySelectorAll("a.photo"); if (elements.length == 0) return; new LuminousGallery([...elements], {}, { caption: (el) => { let html = `<div class="caption">${el.dataset.caption}</div>`; html += `<div class="location">${el.dataset.location}</div>`; html += `<a href="${el.getAttribute("image-url")}">詳しく見る</a>`; return html; } });

このようにHTMLも使用できるため例えば写真の詳細ページへのリンクなどを表示することもできる。 しかしデフォルトのままではこれはうまく動作しない。 リンク自体は表示されるのだが、クリックしても画像のポップアップが閉じるだけでリンク先に移動することができないのだ。

これはLuminous.jsの仕様でデフォルトではポップアップした画面をクリックするとポップアップを閉じる仕様になっているからだ。 キャプションの中に表示したリンクもそのクリック対象に含まれているため、リンクをクリックしてもポップアップを閉じる処理が優先されてしまうのだ。 それもひとまず解決を見たのでその方法をまとめたい。

なお以下で紹介するコードはGitHubで/src/jsに入っているソースコードを元にしている。

Luminous.jsのバージョンについて

この記事はLuminous.jsのバージョン2.4.0に関するものであり、将来的にライブラリの仕様が変わる場合もあるためご注意願いたい。

なお2022年9月11日時点では上記GitHubのsrcフォルダ内にはバージョン2.4.0のファイルが入っているが、distフォルダにはなぜか古いバージョン2.3.5のファイルが入っているので注意が必要だ。 一覧表示では2.4.0と表示されているが、中身のコードを見ると冒頭のコメントに2.3.5と書かれているのがわかる。

リンクが動作しない原因と解決策

Luminous.jsではポップアップを閉じる時にLightbox.js内の _handleClose(e)が呼び出される。 これを呼び出すイベントはcloseTriggerオプションで指定でき、デフォルトではclickが割り当てられている。 この部分は以下のようになっている。

JavaScript
// Lightbox.js内 _handleClose(e) { if (e && typeof e.preventDefault === "function") { e.preventDefault(); } const onClose = this.settings.onClose; if (onClose && typeof onClose === "function") { onClose(); } }

このe.preventDefault();によってリンクの動作が無効化されている。

そこで以下のように改造してみた。

JavaScript
// Lightbox.js内 _handleClose(e) { // 追加:ここから if (e && e.target instanceof HTMLAnchorElement) return; // 追加:ここまで if (e && typeof e.preventDefault === "function") { e.preventDefault(); } const onClose = this.settings.onClose; if (onClose && typeof onClose === "function") { onClose(); } }

もしクリックされたのがリンクだった場合、そこで処理を中断してe.preventDefault();が呼ばれないようにする。 これにより本来のリンクの動作が実行されるようになり、無事目的のページへ遷移することができるようになった。

キーワード
JavaScript
シェアする
サイトマップ SITEMAP 広告 写真 PHOTO
年度
2024 2023 2022 2021 2020 2019 2018 2017 ~2016
アルバム
傑作選 北海道 石鎚山系 ネパール 屋久島 北アルプス 中央アルプス 離島 巨樹
写真の一覧へ
ストックフォトで作品を探す
JOURNEY
2020年 冬の屋久島歩き旅
2019年 厳冬期北海道徒歩横断
旅の一覧へ
ブログ BLOG
カテゴリ
写真 よもやま話
タグ
スポット 道具 心得
ブログの一覧へ
開発室 DEVELOPMENT
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web
開発室の一覧へ
広告
サイトマップ SITEMAP
スタジオ旅路
https://tabiji.gallery
渡邊 佑
tabiji.gallery (c) 2020 Yu Watanabe サイトマップ SITEMAP 写真 PHOTO
年度
2024 2023 2022 2021 2020 2019 2018 2017 ~2016
アルバム
傑作選 北海道 石鎚山系 ネパール 屋久島 北アルプス 中央アルプス 離島 巨樹
写真の一覧へ
ストックフォトで作品を探す
JOURNEY
2020年 冬の屋久島歩き旅
2019年 厳冬期北海道徒歩横断
旅の一覧へ
ブログ BLOG
カテゴリ
写真 よもやま話
タグ
スポット 道具 心得
ブログの一覧へ
開発室 DEVELOPMENT
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web
開発室の一覧へ