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

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

Открываем для редактирования файл 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 научился правильно выводит картинки, учитывая пользовательское разрешение экрана.