Улучшаем AJAX галерею jQuery Lightbox (часть 2) – подгон изображения по ширине и высоте браузера

29 марта 2010 39 Рубрика: AJAX, jQuery, По просьбам читателей

« Предыдущая запись
 		   Следующая запись »
 

jquerylightbox Улучшаем AJAX галерею jQuery Lightbox (часть 2) подгон изображения по ширине и высоте браузера По просьбам читателей решаем указанную в заголовке проблему: jQuery Lightbox не умеет подстраивать большие картинки под размер окна браузера. В некоторых случаях это может быть критично, а ведь хочется использовать такого рода плагин. Поковырявшись в исходном коде, я нашёл решение этих вопросов. Для упрощения восприятия, разобью данный вопрос на две задачи, которые последовательно будут решены - одна из другой. Итак…

Задача 1. Нужно заставить jQuery Lightbox уменьшать ширину изображения, если она превысит ширину браузера, при этом пересчитав высоту изображения.

Где-то в районе 203 строки кода вы найдёте функцию _resize_container_image_box. В ней, почти в самом начале, после строки
var intCurrentHeight = $('#lightbox-container-image-box').height();
нужно вставить следующий код:

if(intImageWidth > ($(window).width()-50)) {
   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. Строка 1. До безобразия всё просто - если ширина картинки больше ширины окна браузера, то… Однако есть некоторое пояснение. Во-первых я воспользовался стандартным jQuery методом width() в применении к окну window. При этом я отнимаю ещё 50. Зачем? Очень просто. У картинки есть ещё рамочка и отступ слева. Если взять ширину картинки точно равную ширине браузера, то она всё равно будет немного выходить за его пределы, т.е. -50px - это компенсация. В случае, если рамка вокруг изображения будет установлена шире, то, скорее всего (я не проверял) потребуется другое число компенсации. Конечно, можно сделать это число не статичным, а зависящим от указанного параметра containerBorderSize (определяется в самом начале), но это уже будет вам поле для практики =).
    Да, и конструкция $(window).width() аналогична document.body.clientWidth. Использовать любую по желанию.
  2. Строка 2. Устанавливаем новую высоту картинки с учётом пересчёта из старой.
  3. Строка 4. Устанавливаем новое значение ширины.
  4. Строка 4. Устанавливаем новое значение ширины непосредственно картинке.
  5. Строки 6-8. Казалось бы ненужная вещь - альтернативный случай, когда ширина меньше значения браузера, т.е. по идее ничего не должно меняться и первая конструкция не имеет силы. А вот нет. Если после широкой картинки посмотреть мелкую, то у неё будут параметры большой картинки. Данные строки исключают такое поведение.
  6. Да, а вообще можно строку $('#lightbox-image').css({ width: intImageWidth }); вынести под функцию и удалить 4 строку и 6-8 =).

Всё вроде работает, некоторым большего и не надо. Однако вдруг при уменьшении ширины картинки получится так, что высота выходит за пределы окна браузера, а хотелось бы, чтобы не выходила? Или вдруг на сайте будут одни "высокие" изображения? Надо уменьшать. Для этого формулируем вторую задачу.

 

Задача 2. Нужно заставить jQuery Lightbox  делать две вещи с изображениями, в случае если они превышают размеры окна браузера: а) уменьшать ширину изображения, если она превысит ширину браузера, пересчитать высоту изображения и при этом если новая высоты будет превышать высоту браузера, то заново пересчитать ширину и высоту; б) уменьшать высоту изображения, если она превышает высоту браузера.

Всё туда же и на то же место вставляем код:

if(intImageWidth > ($(window).width()-50)) {
  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. Строки 1-4. Всё идентично предыдущему варианту. Если ширина превышает ширину экрана, то уменьшаем пропорции.
  2. Строки 5-9. Если при новых пропорциях высота всё равно больше высоты экрана, то пересчитываем всё заново. Обращаем внимание, что для высоты взято другое экспериментальное значение - 250. Оно в себя включает также высоту описания картинки.
  3. Строки 10-13. Аналогично 4-8 строкам - на случай, если изначально ширина была нормальная.
  4. Строка 14. Присваиваем ширину непосредственно идентификатору картинки.

 

Вот и всё. jQuery Lightbox теперь умный и умеет подстраивать картинку по размерам окна браузера. Всё предельно просто. А вообще странно, что по данной теме не наткнуться на статью было. Однако теперь положение исправлено, теперь мы все знаем как исправить проблему.

Удачной недели! И кстати, у меня появился Твиттер - следите за изменениями по ссылке =)

 

Ссылки по теме

Часть 1: добавляем поля заголовка и даты
Часть 2: подгон изображения по ширине и высоте браузера
 

, , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 4.50 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Niyangu
    30/03/2010 at 13:11 Постоянная ссылка Цитировать

    Александр, спасибо огромное за статью :)

  2. Александр Шуйский
    30/03/2010 at 13:23 Постоянная ссылка Цитировать

    Всегда пожалуйста =) Будут ещё интересные идеи, буду рад выслушать, может ещё какая-нибудь полезная статья выйдет в свет =)

  3. faine
    19/10/2010 at 23:53 Постоянная ссылка Цитировать

    Статья интересная. А у меня совсем маленький вопросик :) Я новичек, скачала Lightbox 2, установила и теперь не знаю где поменять цвет рамок маленьких изображений, к сайту по дизайну черный цвет рамок не подходит. Может кто подскажет где это можно поменять, смотрела в css, там не нашла, в js плохо разбираюсь. Подскажите пожалуйста.

  4. Александр Шуйский
    20/10/2010 at 19:40 Постоянная ссылка Цитировать

    поищите по цсс сначала, а потом и по js сочетание #000 или black. вы найдте строчки, в которых используется чёрный цвет. по идее у картинок должна быть запись типа border: 2px solid #000; заменяйте номер цвета и всё =)

  5. Эльнур
    19/03/2011 at 14:54 Постоянная ссылка Цитировать

    Большое спасибо. Класно решило проблему.

    Только ввели в недоразумение комментарии:
    Строки 11-15? Строка 16???
    я вижу 14 строк.

  6. Александр Шуйский
    19/03/2011 at 15:05 Постоянная ссылка Цитировать

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

    Рад был помочь!

  7. Эльнур
    19/03/2011 at 15:16 Постоянная ссылка Цитировать

    Теперь ясно. Спасибо.
    Я подобрал себе вертикальную компенсацию 150.

  8. Александр Шуйский
    19/03/2011 at 15:44 Постоянная ссылка Цитировать

    Последний раз я тоже брал 150, на более низких разрешениях экрана оно получше

  9. Neopredel
    24/03/2011 at 21:56 Постоянная ссылка Цитировать

    Огромный РЕСПЕКТ за статью! Я пол дня не мог найти требуемого!

  10. Александр Шуйский
    24/03/2011 at 22:01 Постоянная ссылка Цитировать

    Всегда пожалуйста! =)

  11. Alex
    28/09/2011 at 17:57 Постоянная ссылка Цитировать

    Спасибо! Помогла статья :)

  12. Александр Шуйский
    28/09/2011 at 21:47 Постоянная ссылка Цитировать

    Рад слышать! =)

  13. Mad Doc
    10/10/2011 at 10:30 Постоянная ссылка Цитировать

    Огромное спасибо, статья помогла, тоже полдня интернет копал, пока на Вашу статью не наткнулся. Мегареспект!
    А вот попутно вопрос возник, можно ли картинки в исходном размере, например, 1024 х 768 открывать в окне фиксированного размера, допустим, 600х400 со скроллингом?

  14. Александр Шуйский
    10/10/2011 at 11:40 Постоянная ссылка Цитировать

    большое спасибо за отзыв =)
    точно не помню, но думаю можно.
    а вообще, я посоветовал бы использовать colorbox - там ничего настраивать не надо, всё есть, да и кроссбраузерен.

  15. Лина
    15/12/2011 at 14:18 Постоянная ссылка Цитировать

    Александр, добрый день!
    спасибо огромное за статью! но у меня возникла такая проблема – Ваш код решает проблему только для фаерфокса, а в опере, гугл хроме и ие всё по-старому.
    почему? что я делаю не так?
    заранее спасибо!
    с уважением, Лина

  16. Лина
    15/12/2011 at 14:52 Постоянная ссылка Цитировать

    сорри, сама накосячила! всё просто супер! Александр, спасибо!!!!!!!!

  17. Александр Шуйский
    15/12/2011 at 15:15 Постоянная ссылка Цитировать

    да незачто =)

  18. vom
    14/02/2012 at 2:26 Постоянная ссылка Цитировать

    Скачал версию лайтбокса усеньшенную, можно л ив ней такое провернуть? или что топодобное, вообщем чтоб ресайз рабоотал? вот версия моего лайтбокса pikbox.ru/file/files/1/lightbox.js

  19. Александр Шуйский
    15/02/2012 at 13:22 Постоянная ссылка Цитировать

    у вас лайтбокс прототайповский, здесь жкьюриевский, а это всё таки немного разные вещи :)

  20. vom
    15/02/2012 at 13:56 Постоянная ссылка Цитировать

    Жаль даже расстроен ((( Спасибо за ответ.

  21. Александр Шуйский
    15/02/2012 at 14:04 Постоянная ссылка Цитировать

    Да незачто.

  22. Сергей
    18/06/2012 at 19:24 Постоянная ссылка Цитировать

    В хроме картинки не уменьшаются.

  23. Александр Шуйский
    18/06/2012 at 20:48 Постоянная ссылка Цитировать

    Уменьшаются =)

  24. Даша
    05/07/2012 at 18:25 Постоянная ссылка Цитировать

    Здравствуйте, а у меня такой вопрос: можно в lightbox’е как-нибудь вместо однотонного фона текстурку поставить?я и в css и в коде полазила уже, но безрезультатно(

  25. Александр Шуйский
    07/07/2012 at 9:42 Постоянная ссылка Цитировать

    День добрый!
    За текстуру отвечает контейнер с айди jquery-overlay. В коде ему в атрибут стайл прописывается значение бэкграунда, и его нет в файле стилей. Так что, скорее всего, его надо будет найти в самом скрипте и в нём же изменить значение бэкграунда с чёрного на нужный.

  26. Даша
    07/07/2012 at 15:34 Постоянная ссылка Цитировать

    спасибо большое, я в стилях еще поковырялась, с помощью !important получилось)

  27. Александр Шуйский
    07/07/2012 at 19:15 Постоянная ссылка Цитировать

    Не за что! Если что – обращайтесь =)

  28. Стас
    30/11/2012 at 9:36 Постоянная ссылка Цитировать

    Спасибо, выручил. Странно, что такой функционал не предусмотрели

  29. Александр Шуйский
    30/11/2012 at 23:55 Постоянная ссылка Цитировать

    Даа, сам не понимаю как они так могли… С другой стороны это довольно таки старый плагин… Хотя всё равно на оправдание не очень тянет-)

  30. Андрей
    20/02/2013 at 5:33 Постоянная ссылка Цитировать

    Привет… а это ещё актуально? я не нашёл в своём lightbox строки ar intCurrentHeight = $(‘#lightbox-container-image-box’).height();

    нет её там)) а очень хоцца вашим советом воспользоваться :)

  31. Александр Шуйский
    20/02/2013 at 8:13 Постоянная ссылка Цитировать

    Ну, есть как минимум просто Lightbox, сделанный не на jQuery. И да, вероятно они уже давно переписали плагин и там таких строк может не быть(

  32. Андрей
    20/02/2013 at 16:20 Постоянная ссылка Цитировать

    Ну, есть как минимум просто Lightbox, сделанный не на jQuery. И да, вероятно они уже давно переписали плагин и там таких строк может не быть(

    Блин… фиогво.. у меня 2.51 jquerly вроде weddingshopping.ru/js/lightbox.js тут не подскажите?

  33. Александр Шуйский
    20/02/2013 at 16:25 Постоянная ссылка Цитировать

    ммм, это кажется другой лайтбокс…
    Лайтбокс из этой статьи тут – leandrovieira.com/projects/jquery/lightbox/

  34. Яна
    08/04/2013 at 12:31 Постоянная ссылка Цитировать

    То, что нужно! Благодарю.

  35. Александр Шуйский
    10/04/2013 at 12:44 Постоянная ссылка Цитировать

    Всегда пожалуйста :)

  36. Абай
    31/10/2013 at 1:06 Постоянная ссылка Цитировать

    Спасибо большое!

  37. Александр Шуйский
    31/10/2013 at 8:59 Постоянная ссылка Цитировать

    Пожалуйста =)

  38. Василий
    13/11/2014 at 22:33 Постоянная ссылка Цитировать

    Александр, помогите советом… Есть ли возможность заставить лайбокс менять размер нижнего поля (где выводиться подпись) согласно размеру открываемой фотографии, т.е. чтобы её размер был динамический и был равен ширине рамки текущей фотографии? Пытался сам, но не хватило скилзов. Заранее благодарю!

  39. Александр Шуйский
    17/11/2014 at 0:08 Постоянная ссылка Цитировать

    Василий, добрый день!
    Вообще, он по-умолчанию нижнюю рамку подстраивает под ширину фотки. У вас какой-то косячный лайтбокс или несостыковка версии jquery с оным.