Резиновый jQuery ColorBox для адаптивных сайтов

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

Я не скажу, что использую постоянно только одну конкретную библиотеку, выбор чаще всего делается исходя из поставленных задач. Понятно, что использование лишних библиотек на сайте не всегда целесообразно, иногда правильнее обойтись без них. Но если мне необходим красивый и мощный лайтбокс, я в первую очередь смотрю в сторону jQuery ColorBox.

ColorBox построен на базе популярной библиотеки jQuery и, по-сравнению с аналогами, имеет довольно широкий функционал:

• ColorBox поддерживает изображения, группы изображений, слайд-шоу, подгрузку внешнего контента (Ajax), внутреннего (inline) и фреймов. Т.е все что бывает необходимо;
• Легкий вес скрипта (10кб) позволит быстро и незаметно подгружать ColorBox на ваш сайт. Кроме этого, ColorBox замечен мною на многих известных CDN-серверах;
• Все эффекты управляются с помощью CSS, что дает возможность полностью перестроить внешний облик ColorBox;
• ColorBox может быть изменен и расширен без изменения основного кода скрипта;
• Настройка ColorBox производится без изменения существующего HTML-кода. Что существенно упрощает задачу, подключая ColorBox на уже действующий сайт с большим количеством контента;
• ColorBox имеет предзагрузку изображений в группах, что обеспечивает комфортное визуальное восприятие контента;
• ColorBox проверен временем и владельцами более чем 600 000 веб-сайтов.

Я не буду расписывать все инструкции по интеграции. ColorBox имеет хорошую документацию и массу примеров на сайте разработчика. Мне бы хотелось отметить лишь один недостаток ColorBox и подсказать как это лечится.

При всех своих преимуществах, ColorBox не совсем адекватно работает на сайтах с респонсивной (адаптивной) версткой. Скрипту совершенно неважно текущее разрешение дисплея и он выводит изображение либо в жестких размерах, либо в реальном размере изображения. Речь идет о последней актуальной версии ColorBox 1.4.33. Возможно в будущих релизах, разработчик поправит это недоразумение, но пока это лечится только небольшим сниппетом.

Итак, чтобы сделать лайтбоксы ColorBox резиновыми и вписать в адаптивный дизайн, необходимо добавить в код вашего сайта всего лишь несколько строк JavaScript.

// Адаптивный ColorBox
 
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';
 
/*
Функция ресайза ColorBox
*/
 
var resizeTimer;
function resizeColorBox()
{
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
}
 
/*
Ресайз при изменении размера окна браузера и изменении ориентации мобильного устройства
*/
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

И всё.