jquery.maximage.jsで、画像に最小サイズを指定する機能を追加する

よくFlashサイトなどで見られる、写真をフルスクリーンに表示する機能をJavaScriptで実現するjQueryプラグイン、"jquery.maximage.js"。
そこそこ軽くて、おせっかいな機能もあんまりついてない、お気に入りのプラグインです(スライドショー機能はクロスフェードのトランジションがついてないので正直微妙)。
本家デモはこちら
まー、ようはでかい画像にブラウザサイズに応じたwidthとheightを動的に付けてるだけという力技プラグインなんですが、今ではクライアント側のブラウザ性能も、ネット・PC環境も向上してるのでこういう仕組みを見てもあんまり違和感を覚えなくなりましたね。

実装方法などは"jquery.maximage.js"でググったら日本語の丁寧な解説サイトも多く見つかりますのでそちらを参考にしていただくとして。こちらとか。

ここから本題。
このプラグインの不満点をあげるとすれば、画像の最小サイズの指定ができないこと。ブラウザを小さくするとどこまでも小さくなってく。
でも、デザインの都合上、最小サイズを決めたいことはある訳で。
ということで、最小サイズを指定する変更をささやかに加えました。

初期設定に以下の変数を追加。L52あたりかな？
最小サイズ指定用の"minImgWidth"を追加。

　　　　　　　　・
　　　　　　　　・(色々な設定)
　　　　　　　　・
    resizeMsg:            resizeMsgDefaults,
    onImageShow:          function(){},
    minImgWidth:           '0'//[modified] minImgWidthを追加
  }, options);

あらかじめ最小サイズが決まってるなら'0'じゃなくてもいいですね。
続いて、画像のサイズ計算は関数"find_width_and_height"(L359あたり)で行ってるようなので、この関数内に"minImgWidth"が指定されてた時の処理を追加してreturnする配列(arrayImageSize)を上書き変更。
既にratio(比率)を計算してくれているので、横幅が分かってれば横幅÷比率で縦幅が出るので指定もらくちん。

    // If maxAtRatio == true and your new width is larger than originalWidth, size to originalWidth
    if (opts.maxAtOrigImageSize && width > originalWidth){
      arrayImageSize = new Array(originalWidth,originalHeight);
    }else{
      arrayImageSize = new Array(width,height);
    }
    if (opts.minImgWidth>0 && width<opts.minImgWidth){
      arrayImageSize = new Array(opts.minImgWidth,opts.minImgWidth/ratio);
    }//[modified]このif文を追加!
    return arrayImageSize;
  }, options);

あとは、プラグインを実行するときに、"minImgWidth"へ最小にしたい場合の横幅を加えれば完成。

$(function(){
  $("#maxImage").maxImage ({
    verticalAlign: ("top"),
    isBackground: true,
    minImgWidth: "700"
  });
});

うーん、この手の機能をフルスクラッチで作るのは相当めんどいけど、既に作ってくれてる方がいるとこういう修正だけですむのがいいところですな。
あと気になるのは、Flashのようなアンチエイリアス機能などは当然ないので、アンチエイリアスがしょぼいIE7以前のブラウザでは縮小したときに画像がガタガタに表示されてしまうこと。
こればっかりは例によってしょうがない。IE諸氏はいつものダメっぷりで逆に安堵すら覚えます。爆発するのを気長に待つとしよう。

#追記
と思ったら、IEにも独自プロパティで画像のサイズが拡大縮小された時の描画方法を指定する方法がある模様。

#maxImage img {
  -ms-interpolation-mode: bicubic;
}

この指定をすることで、IE7以降では縮小された画像がバイキュービック法でアンチエイリアス処理されるとのこと。
はじめは値は"bycubic"じゃないの？と思ったんですが、"bicubic"で正しいみたい。
ただ、IE、デフォルトでこの値になっている気も。。。画質優先であの画質なら全然ダメじゃん。。
まだ検証してないからわからないけど。
こちらのサイトで詳しく紹介されてました。

機会があるときに検証記事アップします。

#追記
デフォルトで"-ms-interpolation-mode: bicubic;"になっていないのはIE7のみ。なのでこの指定はIE7のみに有効とのことが分かりました。
IE6以前はそもそもこのオプションをサポートしてないので、IE7対策のために指定しとくといいと思います。