これまでは、大きめの画像を表示させる場合に、Webブラウザの別タブを
開いて表示させるという方法をとっていましたが、Lightbox2 という
プラグインを導入して、同じウインドウ内にモーダルウインドウで表示
させるようにしてみました。これでタブを閉じる必要がなくなったので
閲覧が楽になったかな?と、思います
Lightbox2 を導入して、画像の表示をモーダルウィンドウで表示する
ようにしたのに伴い、CSS、JavaScript(jQuery)について変更をしました
といっても、やった事は CSS と JavaScript を外部(CDN)から読み込む
タグを、たった三行追加しただけです
何に時間がかかって苦労したかと言えば、画像をモーダルウインドウで
表示するために、画像を表示させるためのタグを全て修正しなければ
ならなかった事です。また、モーダルウインドウで画像を表示させた場合
画像のサイズが大きいものはスクロールが必要になってしまい、画像を
閉じた時に元々見ていた所もスクロールしてしまうので、閲覧しにくく
なってしまう事でした。もしかすると CSS をいじったりすれば、画像の
サイズを任意のものに変更する事ができるのかもしれませんが、そこまでの
技量はないので、力業で画像のリサイズを行って対応しました
それで、画像を表示させるタグを修正し、画像をリサイズするソフト
(BatchGOO!)を使って、丁度いいサイズになるように何度も試し
テストをするとかしているうちに、半日以上の時間がかかってしまいました
Lightbox2 をダウンロードして、自分の使っている Webサーバーに
アップロードして使う事もできるようですが、バージョンアップが
あった場合に何も考える必要がないので、外部から読み込んで使う
方が楽かもしれない…とか考えています
Lightbox2(jQuery)は結構前からあるもののようで、知っている人から
すれば、今更な話なのかもしれません…
画像拡大スクリプトLightbox2の簡単な設置方法&使い方 [ホームページ作成] All About
https://allabout.co.jp/gm/gc/470618/【jQuery】lightbox2の使い方【オプション・レスポンシブ対応解説】 | ジトサイト
https://jito-site.com/lightbox2-usage-option/みんなが知らないJQueryの歴史 | 埼玉のホームページ制作会社|保守・運用まで対応|メディアプライムスタイル
https://www.mediaprimestyle.jp/column_post/jquery-history/