Главная > Разработка > JQuery Lightbox: Настройка большие изображения до размера окна

JQuery Lightbox: Настройка большие изображения до размера окна

JQuery LightBox большой плагин вдохновили известного Lightbox JS по Локеш Dhakar.

После начала использования я понял, что все стало грязным с большими изображениями, так что я внес небольшие изменения ограничить размер текущего размера окна браузера.

Также я добавил возможность скрыть информацию об изображении. Изображения, используемые для перемещения между изображениями и закрыть просмотра на английском языке, поэтому я изменил образы более нейтральным (только иконки)

Код
Две новые возможности были добавлены:

fitToWindow: true,		// option to fit preview to window size if the
                                // image is too big
showInfo:    true		// option to show or hide image info

To fit the preview to the window size, I’ve replaced the call to _resize_container_image_box() with _adjust_image_size().

Here is the definition of the new function:

function _adjust_image_size(objImagePreloader) {
    // get image size
    var imgWidth = objImagePreloader.width;
    var imgHeight = objImagePreloader.height;

    var arrayPageSize = ___getPageSize();
    // calculate proportions
    var imageProportion = imgWidth / imgHeight;
    var winProportion = arrayPageSize[2] / arrayPageSize[3];
    if (imageProportion > winProportion) {
        // calculate max width base on page width
        var maxWidth = arrayPageSize[2] - (settings.containerBorderSize * 2) - (arrayPageSize[2] / 10);
        var maxHeight = Math.round(maxWidth / imageProportion);
    } else {
        // calculate max height base on page height
        var maxHeight = arrayPageSize[3] - (settings.containerBorderSize * 2) - (arrayPageSize[3] / 10) - 40;
        var maxWidth = Math.round(maxHeight * imageProportion);
    }
    if (imgWidth > maxWidth || imgHeight > maxHeight) {
        imgWidth = maxWidth;
        imgHeight = maxHeight;
    }
    $('#lightbox-image').attr('width', imgWidth);
    $('#lightbox-image').attr('height', imgHeight);
    _resize_container_image_box(imgWidth, imgHeight);
};

Finally, to optionally hide or show the image info, just canged the following line:

if ( settings.imageArray.length > 1 ) {

to:

if ( settings.showInfo && (settings.imageArray.length > 1) ) {

Download modified code here – jQuery lightBox 0.5 AlferSoft Mod

  1. January 27th, 2012 at 09:21 | #1

    hi, i can’t instal your plug in, it failes.. can you help me?! please!!
    sorry for my english ;P

  2. fvicente
    January 29th, 2012 at 23:13 | #2

    Olá @Rosa
    Na verdade a instalação é simplesmente copiar os arquivos no seu servidor e usar. Na página original do jQuery Lightbox ( http://leandrovieira.com/projects/jquery/lightbox/ ) estão as instruções na aba “How to use” – perdão por meu portugués : D .

 

Spam protection by WP Captcha-Free