NP_LighboxEXは、サムネイルを表示させ且つポップアップにLightbox JS 2.0を使用したプラグインです。
nucleusプラグインでこれ系のプラグインは、いくつかありますが、NP_LighboxEXは、大きい画像サイズのままでポップアップするので、ちょっと使い勝手がわるかったのでした。
画像をそのままアップするよりは、大きさを調整してアップすべきなのでしょうが、どしどしアップしたい場合は、どうしても、そのままでアップしていました。
これの解決案があったので、やってみたら、うまきいきました。
LightBox 2 で表示される画像サイズを指定する の記事にあった方法をやってみました。
だが、一点残念に思った点がある。
実はウィンドウサイズを超える画像を開くとウィンドウからはみ出して非常にかっこわるい。
サイズ上限を設定する機能が備わっていないのでスクリプトに手を入れることにする。
手を入れるスクリプトは lightbox-2/lightbox.js で、以下の 278 〜 290 行目の13行を追加する。
物によっては行数が異なるので、imgPreloader.onload=function() を目印にするとよい。
これでと横幅 800px を超えていれば横幅を 800px にし、縦幅を同スケールでサイズダウン。
縦幅が 500px を超えていれば縦幅を 500px にし、横幅を同スケールでサイズダウン。
一画像で両方の処理を通るケースもあるが、多分大丈夫と思う。
厳密に言うと計算中に丸められて誤差が出るがまぁ目には見えないレベルなので許容。
これで私のような画面の狭いノートPCでもウィンドウをはみ出ることはなくなる。
画面解像度を取得する処理を加えれば閲覧環境によってサイズ変えられる。
今回のところはサイズが変える方法がわかったのでこれで終了とする。
最後に、冒頭でサイトデザイン命みたいなこと言ってますが、そんな私はブログのデザインはフリーのテンプレートを利用させていただいてます。orz
NP_LighboxEX での変更
上記を参考に、plugins ＞ lightboxex ＞ js ＞ lightbox.js を編集
わたしの場合は、 377行の
// once image is preloaded, resize image container imgPreloader.onload=function(){ の部分
// once image is preloaded, resize image container imgPreloader.onload=function(){ //katsu var imgWidthMax = 1024; // Max Width Size [px] var imgHeightMax = 2048; // Max Height Size [px] var imgNewScale = 1; if( imgWidthMax < imgPreloader.width ) { imgNewScale = imgWidthMax / imgPreloader.width; imgPreloader.width = imgWidthMax; imgPreloader.height *= imgNewScale; } if( imgHeightMax < imgPreloader.height ) { imgNewScale = imgHeightMax / imgPreloader.height; imgPreloader.width *= imgNewScale; imgPreloader.height = imgHeightMax; } Element.setSrc('lightboxImage', imageArray[activeImage][0]); Element.setWidth('lightboxImage', imgPreloader.width); Element.setHeight('lightboxImage', imgPreloader.height); myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); としました。
横サイズ最大を 1024 px
縦サイズ最大を 2048 px
うまくいったよ。
関連記事
■ 関連キーワード
- NP_LighboxEX