around design

自分でブログを書く場合は画像を指定のサイズにリサイズしてからアップするのですが、
あまり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」を使うとアップする画像のサイズを指定サイズにできます。