СтатьиРазное

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);


Комментарии

Имя:
Текст комментария:
* В комментариях запрещено публиковать рекламные объявления. Сообщения, содержащие ссылки на сторонние ресурсы добавляется в скрытом режиме. Они будут открыты, если не нарушают установленных правил, после проверки.
Защита от спам-роботов (* Обязателельно укажите ответ на простой вопрос ниже.)
Разность чисел шeсть минyс oдин? (цифра)