JQuery Lightbox - настройка размера картинки

Задача – в используемом Lightbox v2.7.1, ограничить изображения по ширине окна браузера. Готового решения не нашел, поэтому предлагаю свое. Плюс, чтобы уже все было в одном месте, еще два варианта настройки – свои фиксированные ограничения размера, а так же фиксированная ширина и высота изображений.

Для настройки размеров изображения нам понадобиться файл lightbox.js. Ищем вот этот кусок кода:

// задается размер рабочей области окна браузера
windowWidth = $(window).width();
windowHeight = $(window).height();

// вычисление минимального размера изображения по ширине и высоте
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

// вычисление больше ли картинка допустимого размера и нужно ли править ее размер
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {

     // определение подгонять под ширину или под высоту окна браузера
     if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
         imageWidth = maxImageWidth;
         imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
         $image.width(imageWidth);
         $image.height(imageHeight);
     } else {
         imageHeight = maxImageHeight;
         imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
         $image.width(imageWidth);
         $image.height(imageHeight);
     }
}

Размер изображения по ширине окна браузера

Для этого редактируем строку:

maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;

исправляем на:

maxImageWidth = windowWidth - 30;

-30 делается чтобы кнопочка закрыть в дизайне не выходила за край окна и не создавала горизонтальной прокрутки.

Здесь:

if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
    if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
       imageWidth = maxImageWidth;
       imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
       $image.width(imageWidth);
       $image.height(imageHeight);
    } else {
       imageHeight = maxImageHeight;
       imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
       $image.width(imageWidth);
      $image.height(imageHeight);
    }
}

оставляем лишь проверку на необходимость уменьшать изображение и настройку по ширине:

if (preloader.width > maxImageWidth) {
    imageWidth = maxImageWidth;
    imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
    $image.width(imageWidth);
    $image.height(imageHeight);
}

Собственные ограничения размера изображения Lightbox

Строки:

maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;

правим на необходимые значения:

maxImageWidth = 800;
maxImageHeight = 600;

Здесь конечно нужно учитывать, что с этой настройкой, окно Lightbox может выходить за пределы экрана, если размер самого экрана будет меньше.

Фиксированный размер окна Lightbox

Экзотика, но мало ли, понадобиться. Правим:

if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
   if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
       imageWidth = maxImageWidth;
       imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
       $image.width(imageWidth);
       $image.height(imageHeight);
   } else {
       imageHeight = maxImageHeight;
       imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
       $image.width(imageWidth);
       $image.height(imageHeight);
   }
}

на:

imageWidth = 800;
imageHeight = 600;
$image.width(imageWidth);
$image.height(imageHeight);