Как открывать большие картинки в Lightbox, чтобы они вмещались в экран?

При разработке очередного клиентского сайта, мне захотелось небольшого разнообразия и я решил променять свой любимый Fancybox на что-то новое. Fancybox – это один из лучших и функциональных просмотрщиков картинок для сайтов. Поэтому искал я что-то похожее на него.

Свой выбор я остановил на Lightbox, который оказался очень простым и не менее красивым. Результат получился очень даже неплохой. Но так как я всегда просчитываю все возможные клиентские поступки, то заметил небольшую проблему. Если человек, который будет в последствии, наполнять сайт, загрузит большое по разрешению изображение, то Lightbox выведет его в полый размер. Даже если это изображение будет больше ширины пользовательского экрана, а это уже нехорошо.

Немного покопавшись в интернете я нашел на одном забугорном форуме решение этой проблеме.

При разработке любого сайта нужно всегда учитывать возможные действия менеджера, который будет наполнять в дальнейшем сайт. Кстати, много умных и полезных вещей написано здесь – Руководство по созданию интернет-магазина. Стоит прочитать перед тем, как двигаться дальше.

Недолго думая, я слямзил его к себе на блог и применил на клиентском сайте. Остался доволен как слон.

Открываем для редактирования файл lightbox.js и ищем в нем кусок кода:

preloader.onload = function() {
  $image.attr('src', _this.album[_this.currentImageIndex].link);
  $image.width = preloader.width;
  $image.height = preloader.height;
  return _this.sizeContainer(preloader.width, preloader.height);
};

меняем его на:

preloader.onload = function() {
  $image.attr('src', _this.album[_this.currentImageIndex].link);
  if (preloader.width > window.innerWidth * 0.9) {
    preloader.height = (window.innerWidth * 0.9 * preloader.height) / preloader.width;
    preloader.width = window.innerWidth * 0.9;
  }
  if (preloader.height > window.innerHeight * 0.8) {
    preloader.width = (window.innerHeight * 0.8 * preloader.width) / preloader.height;
    preloader.height = window.innerHeight * 0.8;
  }
  $image.width = preloader.width;
  $image.height = preloader.height;
  $image.attr('width', preloader.width + "px");
  return _this.sizeContainer(preloader.width, preloader.height);
};

А также немного нужно подправить стили. Делается это в файле ligthbox.css. Ищем код:

#lightbox img {
  width: auto;
  height: auto;
}

и меняем его на:

#lightbox img {
  /* width: auto;
     height: auto; */
}

После этих нехитрых манипуляций Lightbox научился правильно выводит картинки, учитывая пользовательское разрешение экрана.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: