lightbox2をIE8でもブラウザのサイズに合わせて表示する

lightbox2の最新版？(2013/04/23時点)を使うと、
画像のサイズでポップアップが表示されます。
んで、ブラウザのサイズに合わせて表示したいという時は


・lightbox.js
・lightbox.css


の2ファイルに手を入れる必要があります。
この方法、既にいくつかのサイトでやり方は紹介されているのですが、
IE8で表示すると、色々エラーになります。
(Nullまたはオブジェクトがとか言われたり、画像サイズが整わなかったりします。)


そこで、調整してみました。
現時点でIE8以降、Firefox、Chromeで大丈夫そうです。
以下、各ファイルの変更点となります


・lightbox.js
変更前：
preloader.onload = function() {
    $image.attr(‘src’, _this.album[imageNumber].link);
    $image.width = preloader.width;
    $image.height = preloader.height;
    return _this.sizeContainer(preloader.width, preloader.height);
};


変更後：
preloader.onload = function() {
    $image.attr(‘src’, _this.album[imageNumber].link);
    if (preloader.width > $(window).innerWidth() * 0.9) {
        preloader.height = ($(window).innerWidth() * 0.9 * preloader.height) / preloader.width;
        preloader.width = $(window).innerWidth() * 0.9;
    }


    if (preloader.height > $(window).innerHeight() * 0.8) {
        preloader.width = ($(window).innerHeight() * 0.8 * preloader.width) / preloader.height;
        preloader.height = $(window).innerHeight() * 0.8;
    }
    $image.width = preloader.width;
    $image.height = preloader.height;
    $image.css(‘width’, preloader.width + "px");
    return _this.sizeContainer(preloader.width, preloader.height);
};


・lightbox.css
変更前：
#lightbox img {
width: auto;
height: auto;
}


変更後：
消す、またはコメントアウト
#lightbox img {
/*width: auto;
height: auto;*/
}


以上です。試してみてください。