2009-12-22

[WordPress] lightboxで画像の最大幅を設定


自分でブログを書く場合は画像を指定のサイズにリサイズしてからアップするのですが、
あまりPCに詳しくない人がブログを書く場合には、大きいサイズのままアップすることがあると思います。

このときに、lightboxで拡大表示をすると、大きいサイズのまま表示されてしまいます。
それを防ぐために、lightboxのプラグインを改造しました。
横幅の最大値を960px、縦を720pxとしました。

まずCSSの変更です。IE6用にもハックを追加。
lightbox-2-wordpress-plugin/lightbox/css/lightbox.css に下記を追加。

#lightbox img#lightboxImage{
width: auto; height: auto; max-width: 960px; max-height: 720px;
}
* html body #lightbox img#lightboxImage{
height: expression(this.height >= 720 ? "720px" : "auto");
}


次にJavascriptの変更。
lightbox-2-wordpress-plugin/lightbox/js/lightbox.js
「 imgPreloader.onload = (function(){ 」の次の行から下記を追加。

var imgWidthMax = 960; // Max Width Size [px]
var imgHeightMax = 720; // 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;
}



これでバッチリです。
本当はローディングアイコンの位置とかも調整したいのですが、、
それはまた時間のあるときにしたいと思います。

ちなみに理想的には大きいサイズのファイルをアップさせないべきだと思います。
プラグインの「Resize At Upload Plus」を使うとアップする画像のサイズを指定サイズにできます。

コメント / トラックバック 3 件

  1. aonico より:

    lightboxを投入したものの、画像サイズで困っていたのでですが
    おかげさまで無事解決しました。
    本当助かりました。ありがとうございます。

  2. nishi より:

    aonicoさん、コメントありがとうございます。
    この記事は完全に自分用メモの書き方で、あまりていねいに解説していなかったのですが、
    お役に立てたようで良かったです。

  3. […]     ■参考サイト 》LightBox 2 で表示される画像サイズを指定する 》[WordPress] lightboxで画像の最大幅を設定 […]

Comment:

Trackback URL: