jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

Posted at December 8,2011 12:33 AM
Tag:[jQuery, Lightbox]

拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。

jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。

jQuery lightBox plugin
jQuery lightBox plugin

1.問題点

jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。

対処前の拡大画像(ブラウザの幅を超えて拡大)
jQuery lightBox plugin

本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。

対処後の拡大画像
jQuery lightBox plugin

2.jquery.lightbox-0.5.jsの修正

jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、24行目あたりに赤色の2行を追加します。

…前略…
(function($) {
    /**
     * $ is an alias to jQuery object
     *
     */
    $.fn.lightBox = function(settings) {
        // Settings to configure the jQuery lightBox plugin how you like
        settings = jQuery.extend({
            maxWidth : 0,
            maxHeight : 0,
            // Configuration related to overlay
            …後略…

同様に、195行目あたりに赤色の9行を追加します。

…前略…
function _set_image_to_view() { // show the loading
    // Show the loading
    $('#lightbox-loading').show();
    if ( settings.fixedNavigation ) {
        $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    } else {
        // Hide some elements
        $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    }
    // Image preload process
    var objImagePreloader = new Image();
    objImagePreloader.onload = function() {
        $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
        // Perfomance an effect in the image container resizing it
        if ( settings.maxWidth && objImagePreloader.width > settings.maxWidth ) {
            objImagePreloader.height = objImagePreloader.height * (settings.maxWidth / objImagePreloader.width);
            objImagePreloader.width = settings.maxWidth;
            jQuery('#lightbox-image').css('width', settings.maxWidth + 'px');
        } else if ( settings.maxHeight && objImagePreloader.height > settings.maxHeight ){
            objImagePreloader.width = objImagePreloader.width * (settings.maxHeight / objImagePreloader.height);
            objImagePreloader.height = settings.maxHeight;
            jQuery('#lightbox-image').css('height', settings.maxHeight + 'px');
        }
        _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
        //    clear onLoad, IE behaves irratically with animated gifs otherwise
        objImagePreloader.onload=function(){};
    };
    objImagePreloader.src = settings.imageArray[settings.activeImage][0];
};
…後略…

修正が完了したら、元のディレクトリに上書き保存してください。

3.jquery.lightbox実行部分の修正

jquery.lightboxを実行するときに赤色のオプションを追加します。指定した数値の単位はpxで、このサイズが画像拡大時の最大幅(または高さ)になります。

$(function(){
    $('.lightbox').lightBox({
        maxWidth: 800,
        maxHeight: 800,
    });
});

幅だけを制限したい場合はmaxWidthのみを、高さだけを制限したい場合はmaxHeightのみを記述してください。両方記述した場合、幅の制限が優先されます。

4.参考サイト

参考サイトは下記です。ありがとうございました。

jquery lightbox で拡大画像の幅を指定する
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)