Responsive jQuery ColorBox

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

25 февраля 2014 825 3

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

ThemeForest: Лучшие темы интернет-магазинов для WordPress
ThemeForest: Лучшие темы интернет-магазинов для WordPress

Я не скажу, что использую постоянно только одну конкретную библиотеку, выбор чаще всего делается исходя из поставленных задач. Понятно, что использование лишних библиотек на сайте не всегда целесообразно, иногда правильнее обойтись без них. Но если мне необходим красивый и мощный лайтбокс, я в первую очередь смотрю в сторону 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);

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии
  • Сергей

    Куда этот код добавить нужно в head после подключения jquery.colorbox,js (пробовал, не работает) или в самом файле заменить что-то надо? Было бы здорово демонстрацию посмотреть!

    • Ирина

      Добрый день

      Посмотрите в исходном коде, какой файл используйтся на сайте. По умолчанию прописан
      catalog/view/javascript/jquery/colorbox/jquery.colorbox-min.js

  • Aprilis

    Спасибо! То что нужно!

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее