Lightbox - изменение размера картинки

Иногда бывает необходимым немного изменить картинку, которая выводится популярным скриптом lightbox. К примеру изменить ширину или высоту картинки. Решение этой проблемы не очевидно, но существует.

Еще может быть полезна эта статья JQuery Lightbox - изменение размера картинки.

Столкнулся с проблемой при использовании Lightbox - мне необходимо однозначно определить размеры картинки ( изображения), которые выводится при нажатии. В моем случае, размер картинки не должен был превышать 400 пикселей.

Простое ковыряние с lightbox’ css не дал желаемых результатов, поскольку переопределить размер картинки можно через css, но контейнера, в котором выводится картинка - нет. И в некоторых броузерах получается маленькая картинки на громадном белом фоне.

Традиционно, на помощь прищел гугл, по ссылке можно посмотреть, как парни решают проблему изменения размера картинок в Lightbox.

На сам пост не смотрим, простым переопределнием размеров картинки не получается заставить lightbox делать resize изображения как надо ( о чем и свидетельствуют отзывы в комментах). CSS надо менять, но кроме него необходимо внести правки и в lightbox.js

Итак, в lightbox.css правим

#lightbox img#lightboxImage{ width: 400px; height: auto;}

В lightbox.js
Код, который необходимо вставить, отмечен *

//
//    Configuration
//

...
*var maxWidthImage = 400; //400 is max width show image in pixels*
//------------------------------------------------------------------

...

    //
    //    changeImage()
    //    Hide most elements and preload image in preparation for resizing image container.
    //
 changeImage: function(imageNum) {

        activeImage = imageNum;    // update global var

        // hide elements during transition
        if(animate){ Element.show('loading');}
        Element.hide('lightboxImage');
        Element.hide('hoverNav');
        Element.hide('prevLink');
        Element.hide('nextLink');
        Element.hide('imageDataContainer');
        Element.hide('numberDisplay');

        imgPreloader = new Image();

        // once image is preloaded, resize image container
        imgPreloader.onload=function(){
            Element.setSrc('lightboxImage', imageArray[activeImage][0]);

            *
            if(imgPreloader.width > maxWidthImage){
              var resizeHeight = ((imgPreloader.height)/(imgPreloader.width)* maxWidthImage);
              myLightbox.resizeImageContainer(maxWidthImage, resizeHeight);
          Element.setWidth('lightboxImage', maxWidthImage);
          }
           else  {
              myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
            }
        *
    imgPreloader.onload=function(){};    //    clear onLoad, IE behaves irratically with animated gifs otherwise
        }
        imgPreloader.src = imageArray[activeImage][0];
    },

Я сделал немного не так правильно,
более в лоб. Обошелся без декларации отдельной переменной и проверок.

        imgPreloader.onload = (function(){
            this.lightboxImage.src = this.imageArray[this.activeImage][0];
            this.resizeImageContainer(/*imgPreloader.width*/ 400, (imgPreloader.height/imgPreloader.width)*400);
        }).bind(this);
        imgPreloader.src = this.imageArray[this.activeImage][0];

Работает :)

Сергей Маркитаненко