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

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];

Работает :)