NP_LighboxEX でポップアップする画像サイズを制限したい

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

うまくいったよ。

関連記事

• LightBox 2 で表示される画像サイズを指定する

■　関連キーワード

• NP_LighboxEX