Luminous.jsはピュアなJavaScriptで書かれた軽量な画像ポップアップライブラリだ。 単体画像のポップアップ表示と複数画像のギャラリー表示に対応している。 詳しく知りたい人はネット上に情報があるので検索してみてもらいたい。
Luminous.jsでは初期化時のパラメータを以下のように設定することで、画像の下部に独自のキャプションを表示することができる。
JavaScriptlet 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のバージョン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();
が呼ばれないようにする。
これにより本来のリンクの動作が実行されるようになり、無事目的のページへ遷移することができるようになった。