Как изменить размер изображения для стандартного Lightbox плагина я писал в этой статье — Lightbox — изменение размера картинки. Я отказываюсь от использования библиотеки Prototype в своих проектах по созданию сайтов и полностью перехожу на JQuery. И вполне предсказуемо, что для JQuery Lightbox я столкнулся с той же проблемой, что и для Prototype Lightbox.
О решении проблемы с Prototype Lightbox я писал в заметке Lightbox — изменение размера картинки.
Постановка задачи
Есть сайт с большим количеством изображений/картинок. Для красоты восприятия для вывода картинок используется JQuery Lightbox.
Сами картинки очень часто имеют размеры свыше 2000px либо по ширине, либо по высоте. Что несколько затрудняет просмотр картинки даже на разрешении 1600×1050.
Поэтому задача формулируется как — сделать так, что бы при нажатии на картинку, появившееся изображение имело размер не более 600px по ширине.
Решение задачи — изменение размеров изображения
Как и в случае с Prototype Lightbox мы правим яваскрипт файл — jquery.lightbox-0.5.js
Находим функцию function _resize_container_image_box(intImageWidth,intImageHeight) и после строк
var intCurrentWidth = $('#lightbox-container-image-box').width();
var intCurrentHeight = $('#lightbox-container-image-box').height();Добавляем наш небольшой хак. Алгоритм его работы крайне прост. Мы проверяем ширину изображения, если она больше 600 рх, то мы сначала вычисляем новую высоту картинки — берем отношение текущей высоты и ширины и множим на новую ширину ( 600). Ну и дальше заново инициализируем все переменные, задавая им правильную ширину. Высота будет определена автоматически.
if(intImageWidth > 600 ) {
intImageHeight = (intImageHeight/intImageWidth)*600;
intImageWidth = 600;
$('#lightbox-image').css({ width: 600 });
var intCurrentWidth = 600;
}