Действие этого плагина можно увидеть, нажав на тумбы на главной странице.
Лайтбокс работает не только с одной картинкой, но и с сетами.
Если картинка огромная, то лайтбокс разъезжается на весь экран (по крайней мере в FF 4.0.1 Mac).
И так, мы хотим задать максимальную ширину картинки.
Назовем нашу переменную maxWidthImage
Распаковываем скаченный lightbox, вытаскиваем от туда файл jquery.lightbox-0.5.js (на данный момент версия 0.5, но файл может иметь чуть другое название. главное не «min» и не «pack» т.к. в них ничего приятного мы не сделаем сходу).
Теперь, шаг номер один:
Открываем его в редакторе и ищем строку
activeImage: 0
(в моем случае это строка номер 48 в файле)
Заменяем её на две строки:
activeImage: 0,
maxWidthImage: 900
таким образом мы добавили свою переменную, в которой указываем максимальную ширину картинки.
в данном случае это 900 пикселей, можете изменить на нужное вам.
Шаг номер два:
Ищем
objImagePreloader.onload = function() {
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
и удаляем ПОСЛЕ них всё вплоть до этих:
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
И теперь на то место, где мы только что удалили код, вставляем это:
// Perfomance an effect in the image container resizing it
if(objImagePreloader.width > settings.maxWidthImage){
var resizeHeight = ((objImagePreloader.height)/(objImagePreloader.width)* settings.maxWidthImage);
_resize_container_image_box(settings.maxWidthImage,resizeHeight);
$('#lightbox-image').attr("width",settings.maxWidthImage);
}
else {
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
$('#lightbox-image').attr("width",objImagePreloader.width);
}
Вот и все. сохраняем файл и радуемся автоматическому ресайзу картинки до максимальной ширины в 900(в нашем случае) пикселей
Если у вас что-то не получилось или не работает, можете скачать готовый файл