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

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

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

Luminous.jsとは

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

Googleで検索Luminous.js

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

エリア:北アルプス
深山唐松
衣笠草
天空の花
車百合
白山石楠花
白馬への道
氷の華咲く
厳冬のジャンダルム

さて、本題に入るためにまず上の画像をどれでも良いのでクリックしてもらいたい。 画像が全画面でポップアップし、画像の下には詳細ページへのリンクが貼られていると思う。 そのリンクをクリックすれば実際に詳細ページへ移動するはずだ。

これは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 写真データ販売中! STOCKPHOTO 写真のデータ販売について 写真 PHOTO
湘南ひらつか花火大会
深山唐松
衣笠草
天空の花
車百合
白山石楠花
写真の一覧へ
エリア
ネパール 北海道 屋久島 沖縄 北アルプス 石鎚山系 剣山地 鳥取大山 くじゅう連山 丹沢・大山 富士山
被写体
河川・湖沼 森林 雲・霧 石・岩 雪・氷 生物 植物 街・集落 鉄道 神社 寺院 人物 生活
季節
時間
夕方 マジックアワー
オレンジ・黄 ピンク・紫 茶色 虹色 錦繍
キーワード
石鎚神社
販売
Aflo PIXTA imagemart
タグ
トップ画像 傑作選
コラム PHOTO BLOG
コラムの一覧へ
カテゴリ
撮影 道具
開発室 DEVELOPMENT BLOG
開発室の一覧へ
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript
サイトマップ SITEMAP
スタジオ旅路
https://tabiji.gallery
渡邊 佑
tabiji.gallery (c) 2020 Yu Watanabe サイトマップ SITEMAP 写真データ販売中! STOCKPHOTO 写真のデータ販売について 写真 PHOTO
湘南ひらつか花火大会
深山唐松
衣笠草
天空の花
車百合
白山石楠花
写真の一覧へ
エリア
ネパール 北海道 屋久島 沖縄 北アルプス 石鎚山系 剣山地 鳥取大山 くじゅう連山 丹沢・大山 富士山
被写体
河川・湖沼 森林 雲・霧 石・岩 雪・氷 生物 植物 街・集落 鉄道 神社 寺院 人物 生活
季節
時間
夕方 マジックアワー
オレンジ・黄 ピンク・紫 茶色 虹色 錦繍
キーワード
石鎚神社
販売
Aflo PIXTA imagemart
タグ
トップ画像 傑作選
コラム PHOTO BLOG
コラムの一覧へ
カテゴリ
撮影 道具
開発室 DEVELOPMENT BLOG
開発室の一覧へ
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript