По просьбам читателей решаем указанную в заголовке проблему: jQuery Lightbox не умеет подстраивать большие картинки под размер окна браузера. В некоторых случаях это может быть критично, а ведь хочется использовать такого рода плагин. Поковырявшись в исходном коде, я нашёл решение этих вопросов. Для упрощения восприятия, разобью данный вопрос на две задачи, которые последовательно будут решены - одна из другой. Итак…
Задача 1. Нужно заставить jQuery Lightbox уменьшать ширину изображения, если она превысит ширину браузера, при этом пересчитав высоту изображения.
Где-то в районе 203 строки кода вы найдёте функцию _resize_container_image_box. В ней, почти в самом начале, после строки
var intCurrentHeight = $('#lightbox-container-image-box').height();
нужно вставить следующий код:
intImageHeight = (intImageHeight/intImageWidth)*($(window).width()-50);
intImageWidth = ($(window).width()-50);
$('#lightbox-image').css({ width: intImageWidth });
}
else if (intImageWidth < (document.body.clientWidth-50)) {
$('#lightbox-image').css({ width: intImageWidth });
}
-
Строка 1. До безобразия всё просто - если ширина картинки больше ширины окна браузера, то… Однако есть некоторое пояснение. Во-первых я воспользовался стандартным jQuery методом width() в применении к окну window. При этом я отнимаю ещё 50. Зачем? Очень просто. У картинки есть ещё рамочка и отступ слева. Если взять ширину картинки точно равную ширине браузера, то она всё равно будет немного выходить за его пределы, т.е. -50px - это компенсация. В случае, если рамка вокруг изображения будет установлена шире, то, скорее всего (я не проверял) потребуется другое число компенсации. Конечно, можно сделать это число не статичным, а зависящим от указанного параметра containerBorderSize (определяется в самом начале), но это уже будет вам поле для практики =).
Да, и конструкция $(window).width() аналогична document.body.clientWidth. Использовать любую по желанию. -
Строка 2. Устанавливаем новую высоту картинки с учётом пересчёта из старой.
-
Строка 4. Устанавливаем новое значение ширины.
-
Строка 4. Устанавливаем новое значение ширины непосредственно картинке.
-
Строки 6-8. Казалось бы ненужная вещь - альтернативный случай, когда ширина меньше значения браузера, т.е. по идее ничего не должно меняться и первая конструкция не имеет силы. А вот нет. Если после широкой картинки посмотреть мелкую, то у неё будут параметры большой картинки. Данные строки исключают такое поведение.
-
Да, а вообще можно строку $('#lightbox-image').css({ width: intImageWidth }); вынести под функцию и удалить 4 строку и 6-8 =).
Всё вроде работает, некоторым большего и не надо. Однако вдруг при уменьшении ширины картинки получится так, что высота выходит за пределы окна браузера, а хотелось бы, чтобы не выходила? Или вдруг на сайте будут одни "высокие" изображения? Надо уменьшать. Для этого формулируем вторую задачу.
Задача 2. Нужно заставить jQuery Lightbox делать две вещи с изображениями, в случае если они превышают размеры окна браузера: а) уменьшать ширину изображения, если она превысит ширину браузера, пересчитать высоту изображения и при этом если новая высоты будет превышать высоту браузера, то заново пересчитать ширину и высоту; б) уменьшать высоту изображения, если она превышает высоту браузера.
Всё туда же и на то же место вставляем код:
intImageHeight = (intImageHeight/intImageWidth)*($(window).width()-50);
intImageWidth = ($(window).width()-50);
if(intImageHeight > ($(window).height()-250)) {
intImageWidth = (intImageWidth/intImageHeight)*($(window).height()-250);
intImageHeight = ($(window).height()-250);
}
}
else if(intImageHeight > ($(window).height()-250)) {
intImageWidth = (intImageWidth/intImageHeight)*($(window).height()-250);
intImageHeight = ($(window).height()-250);
}
$('#lightbox-image').css({ width: intImageWidth });
-
Строки 1-4. Всё идентично предыдущему варианту. Если ширина превышает ширину экрана, то уменьшаем пропорции.
-
Строки 5-9. Если при новых пропорциях высота всё равно больше высоты экрана, то пересчитываем всё заново. Обращаем внимание, что для высоты взято другое экспериментальное значение - 250. Оно в себя включает также высоту описания картинки.
-
Строки 10-13. Аналогично 4-8 строкам - на случай, если изначально ширина была нормальная.
-
Строка 14. Присваиваем ширину непосредственно идентификатору картинки.
Вот и всё. jQuery Lightbox теперь умный и умеет подстраивать картинку по размерам окна браузера. Всё предельно просто. А вообще странно, что по данной теме не наткнуться на статью было. Однако теперь положение исправлено, теперь мы все знаем как исправить проблему.
Удачной недели! И кстати, у меня появился Твиттер - следите за изменениями
Ссылки по теме
Часть 1: добавляем поля заголовка и даты
Часть 2: подгон изображения по ширине и высоте браузера
Похожие записи:
- Улучшаем AJAX галерею jQuery Lightbox (часть 1) – добавляем поля заголовка и даты
- Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery
- 20 AJAX галерей на jQuery
- Как изменить размер изображения на PHP? Часть 2: Создаём миниатюры thumbnails
- Как развернуть flash на весь экран при помощи JavaScript?
30/03/2010 at 13:11 Постоянная ссылка Цитировать
Александр, спасибо огромное за статью
30/03/2010 at 13:23 Постоянная ссылка Цитировать
Всегда пожалуйста =) Будут ещё интересные идеи, буду рад выслушать, может ещё какая-нибудь полезная статья выйдет в свет =)
19/10/2010 at 23:53 Постоянная ссылка Цитировать
Статья интересная. А у меня совсем маленький вопросик
Я новичек, скачала Lightbox 2, установила и теперь не знаю где поменять цвет рамок маленьких изображений, к сайту по дизайну черный цвет рамок не подходит. Может кто подскажет где это можно поменять, смотрела в css, там не нашла, в js плохо разбираюсь. Подскажите пожалуйста.
20/10/2010 at 19:40 Постоянная ссылка Цитировать
поищите по цсс сначала, а потом и по js сочетание #000 или black. вы найдте строчки, в которых используется чёрный цвет. по идее у картинок должна быть запись типа border: 2px solid #000; заменяйте номер цвета и всё =)
19/03/2011 at 14:54 Постоянная ссылка Цитировать
Большое спасибо. Класно решило проблему.
Только ввели в недоразумение комментарии:
Строки 11-15? Строка 16???
я вижу 14 строк.
19/03/2011 at 15:05 Постоянная ссылка Цитировать
Вижу, спасибо. Строки были верно указаны, просто до редизайна центральная часть была меньше, вот и закралось недоразумение. Сейчас исправлю.
Рад был помочь!
19/03/2011 at 15:16 Постоянная ссылка Цитировать
Теперь ясно. Спасибо.
Я подобрал себе вертикальную компенсацию 150.
19/03/2011 at 15:44 Постоянная ссылка Цитировать
Последний раз я тоже брал 150, на более низких разрешениях экрана оно получше
24/03/2011 at 21:56 Постоянная ссылка Цитировать
Огромный РЕСПЕКТ за статью! Я пол дня не мог найти требуемого!
24/03/2011 at 22:01 Постоянная ссылка Цитировать
Всегда пожалуйста! =)
28/09/2011 at 17:57 Постоянная ссылка Цитировать
Спасибо! Помогла статья
28/09/2011 at 21:47 Постоянная ссылка Цитировать
Рад слышать! =)
10/10/2011 at 10:30 Постоянная ссылка Цитировать
Огромное спасибо, статья помогла, тоже полдня интернет копал, пока на Вашу статью не наткнулся. Мегареспект!
А вот попутно вопрос возник, можно ли картинки в исходном размере, например, 1024 х 768 открывать в окне фиксированного размера, допустим, 600х400 со скроллингом?
10/10/2011 at 11:40 Постоянная ссылка Цитировать
большое спасибо за отзыв =)
точно не помню, но думаю можно.
а вообще, я посоветовал бы использовать colorbox - там ничего настраивать не надо, всё есть, да и кроссбраузерен.
15/12/2011 at 14:18 Постоянная ссылка Цитировать
Александр, добрый день!
спасибо огромное за статью! но у меня возникла такая проблема – Ваш код решает проблему только для фаерфокса, а в опере, гугл хроме и ие всё по-старому.
почему? что я делаю не так?
заранее спасибо!
с уважением, Лина
15/12/2011 at 14:52 Постоянная ссылка Цитировать
сорри, сама накосячила! всё просто супер! Александр, спасибо!!!!!!!!
15/12/2011 at 15:15 Постоянная ссылка Цитировать
да незачто =)
14/02/2012 at 2:26 Постоянная ссылка Цитировать
Скачал версию лайтбокса усеньшенную, можно л ив ней такое провернуть? или что топодобное, вообщем чтоб ресайз рабоотал? вот версия моего лайтбокса pikbox.ru/file/files/1/lightbox.js
15/02/2012 at 13:22 Постоянная ссылка Цитировать
у вас лайтбокс прототайповский, здесь жкьюриевский, а это всё таки немного разные вещи
15/02/2012 at 13:56 Постоянная ссылка Цитировать
Жаль даже расстроен ((( Спасибо за ответ.
15/02/2012 at 14:04 Постоянная ссылка Цитировать
Да незачто.
18/06/2012 at 19:24 Постоянная ссылка Цитировать
В хроме картинки не уменьшаются.
18/06/2012 at 20:48 Постоянная ссылка Цитировать
Уменьшаются =)
05/07/2012 at 18:25 Постоянная ссылка Цитировать
Здравствуйте, а у меня такой вопрос: можно в lightbox’е как-нибудь вместо однотонного фона текстурку поставить?я и в css и в коде полазила уже, но безрезультатно(
07/07/2012 at 9:42 Постоянная ссылка Цитировать
День добрый!
За текстуру отвечает контейнер с айди jquery-overlay. В коде ему в атрибут стайл прописывается значение бэкграунда, и его нет в файле стилей. Так что, скорее всего, его надо будет найти в самом скрипте и в нём же изменить значение бэкграунда с чёрного на нужный.
07/07/2012 at 15:34 Постоянная ссылка Цитировать
спасибо большое, я в стилях еще поковырялась, с помощью !important получилось)
07/07/2012 at 19:15 Постоянная ссылка Цитировать
Не за что! Если что – обращайтесь =)
30/11/2012 at 9:36 Постоянная ссылка Цитировать
Спасибо, выручил. Странно, что такой функционал не предусмотрели
30/11/2012 at 23:55 Постоянная ссылка Цитировать
Даа, сам не понимаю как они так могли… С другой стороны это довольно таки старый плагин… Хотя всё равно на оправдание не очень тянет-)
20/02/2013 at 5:33 Постоянная ссылка Цитировать
Привет… а это ещё актуально? я не нашёл в своём lightbox строки ar intCurrentHeight = $(‘#lightbox-container-image-box’).height();
нет её там)) а очень хоцца вашим советом воспользоваться
20/02/2013 at 8:13 Постоянная ссылка Цитировать
Ну, есть как минимум просто Lightbox, сделанный не на jQuery. И да, вероятно они уже давно переписали плагин и там таких строк может не быть(
20/02/2013 at 16:20 Постоянная ссылка Цитировать
Блин… фиогво.. у меня 2.51 jquerly вроде weddingshopping.ru/js/lightbox.js тут не подскажите?
20/02/2013 at 16:25 Постоянная ссылка Цитировать
ммм, это кажется другой лайтбокс…
Лайтбокс из этой статьи тут – leandrovieira.com/projects/jquery/lightbox/
08/04/2013 at 12:31 Постоянная ссылка Цитировать
То, что нужно! Благодарю.
10/04/2013 at 12:44 Постоянная ссылка Цитировать
Всегда пожалуйста
31/10/2013 at 1:06 Постоянная ссылка Цитировать
Спасибо большое!
31/10/2013 at 8:59 Постоянная ссылка Цитировать
Пожалуйста =)
13/11/2014 at 22:33 Постоянная ссылка Цитировать
Александр, помогите советом… Есть ли возможность заставить лайбокс менять размер нижнего поля (где выводиться подпись) согласно размеру открываемой фотографии, т.е. чтобы её размер был динамический и был равен ширине рамки текущей фотографии? Пытался сам, но не хватило скилзов. Заранее благодарю!
17/11/2014 at 0:08 Постоянная ссылка Цитировать
Василий, добрый день!
Вообще, он по-умолчанию нижнюю рамку подстраивает под ширину фотки. У вас какой-то косячный лайтбокс или несостыковка версии jquery с оным.