Картонбокс

Джейквери-плагин для вывода фотографий, блоков с контентом и айфреймов в красивых модальных окнах, которые можно группировать, создавая, например, фото- или видео галереи.

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

Поделиться
Плюсануть
Отправить

История версий

1.5.4

1.5.3

1.5.2

1.5.1

1.5

Быстрый старт

Подключаем Джейквери и Картонбокс:

<script src="jquery.min.js"></script> <script src="cartonbox.min.js"></script> <link rel="stylesheet" href="cartonbox.min.css">

Добавляем к ссылке класс .cartonbox и, если это ссылка на картинку, параметр data-cb-type="img":

<a href="image.jpg" class="cartonbox" data-cb-type="img">...</a>

Либо если это ссылка на блок с контентом или сторонний сайт, то параметры data-cb-type="inline" и data-cb-type="iframe", соответственно:

<a href="#text" class="cartonbox" data-cb-type="inline">...</a> <a href="https://apple.com/" class="cartonbox" data-cb-type="iframe">...</a>

Для блока с контентом в теле ХТМЛ-страницы должен присутствовать элемент с id="text" (такой же как название ссылки без хештега) и содержимым, которое отобразится в модальном окне, например:

<div style="display: none;">     <div id="text">         ... ХТМЛ-код ...     </div> </div>

Инициализация:

$(function() {     $.cartonbox(); });

Параметры

Группировка

Чтобы модальные окна можно было листать, группе ссылок достаточно добавить параметр data-cb-group="NAME", где значение NAME должно отличаться у разных групп.

Например, фотогалерею можно создать так:

<a href="image-1.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-2.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-3.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a>

Сгруппировать блоки с контентом так:

<a href="#text-1" class="cartonbox" data-cb-type="inline" data-cb-group="group">...</a> <a href="#text-2" class="cartonbox" data-cb-type="inline" data-cb-group="group">...</a> <a href="#text-3" class="cartonbox" data-cb-type="inline" data-cb-group="group">...</a>

Создать разнотипные модальные окна так:

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-group="qwerty">...</a> <a href="#text" class="cartonbox" data-cb-type="inline" data-cb-group="qwerty">...</a> <a href="https://apple.com/" class="cartonbox" data-cb-type="iframe"     data-cb-group="qwerty" >...</a>

Перемещаться между окнами можно стрелками вправо-влево на клавиатуре, а закрыть окно — нажав клавишу Эскейп.

Хеш-навигация

Параметр data-cb-hash добавляет хеш к адресу веб-страницы. Открытие такой ссылки в браузере сразу приводит к запуску нужного модального окна. Например:

<a href="image.jpg" class="cartonbox" data-cb-type="img" data-cb-hash="picture">...</a> <a href="#text" class="cartonbox" data-cb-type="inline" data-cb-hash="about">...</a> <a href="https://apple.com/" class="cartonbox" data-cb-type="iframe"     data-cb-hash="website" >...</a>

Опции

Через параметр data-cb-options можно передавать дополнительные опции. Например:

<a href="image.jpg" class="cartonbox" data-cb-type="img"     data-cb-options="{brand: 'ford', model: 'focus', generation: 3}" >...</a>

Ещё параметры и примеры

Фотографии

Асфальт —

смесь битумов с минеральными материалами: гравием и песком (щебнем или гравием, песком и минеральным порошком в искусственном асфальте). Применяют для устройства покрытий на автомобильных дорогах, как кровельный, гидро- и электроизоляционный материал, для приготовления замазок, клеев, лаков и др. Асфальт наивысшего качества используется в живописи и при создании литографий.

<a href="image-1.jpg" class="cartonbox" data-cb-type="img">...</a> <a href="image-2.jpg" class="cartonbox" data-cb-type="img"     data-cb-caption="#caption" >...</a> <div style="display: none;">     <div id="caption">         ... ХТМЛ-код ...     </div> </div> <a href="image-3.jpg" class="cartonbox" data-cb-type="img">...</a> <a href="image-4.jpg" class="cartonbox" data-cb-type="img"     data-cb-caption="... Какой-то текст ..." >...</a>

К любой фотографии можно делать подпись, добавив параметр data-cb-caption, содержащий либо ID блока, который нужно загрузить, либо какой-то обычный текст, который будет просто отображён.

Фотогалерея

<a href="image-1.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-2.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-3.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery">...</a> <a href="image-4.jpg" class="cartonbox" data-cb-type="img" data-cb-group="gallery"     data-cb-hash="picture"     data-cb-caption="Фотографии Девида Гёринга (David Goehring)" >...</a>

Блоки с контентом

Простой текстовый блок.

Большая статья со множеством разнообразных элементов и уникальным оформлением.

<a href="#text" class="cartonbox" data-cb-type="inline" data-cb-hash="text">...</a> <a href="#article" class="cartonbox" data-cb-type="inline" data-cb-hash="article"     data-cb-design="earth" >...</a> <div style="display: none;">     <div id="text">         ... ХТМЛ-код ...     </div>     <div id="article">         ... ХТМЛ-код ...     </div> </div>

Каждое окно можно уникально оформить, добавив параметр data-cb-design.

Космос —

относительно пустые участки Вселенной, которые лежат вне границ атмосфер небесных тел. Вопреки распространённым представлениям, космос не является абсолютно пустым пространством — в нём существует очень низкая плотность некоторых частиц (преимущественно водорода), а также электромагнитное излучение и межзвездное вещество. Слово «космос» имеет несколько различных значений. Иногда под космосом понимают всё пространство вне Земли, включая небесные тела.

Вселенная —

не имеющее строгого определения понятие в астрономии и философии. Оно делится на две принципиально отличающиеся сущности: умозрительную (философскую) и материальную, доступную наблюдениям в настоящее время или в обозримом будущем. Если автор различает эти сущности, то, следуя традиции, первую называют Вселенной, а вторую — астрономической Вселенной или Метагалактикой (в последнее время этот термин практически вышел из употребления). Вселенная является предметом исследования космологии.

Космос

Земля —

третья от Солнца планета. Пятая по размеру среди всех планет Солнечной системы. Она является также крупнейшей по диаметру, массе и плотности среди планет земной группы. Единственное известное человеку на данный момент тело Солнечной системы в частности и Вселенной вообще, населённое живыми организмами.



Приблизительно 70,8% поверхности планеты занимает Мировой океан, остальную часть поверхности занимают континенты и острова. На материках расположены реки, озёра, подземные воды и льды, вместе с Мировым океаном они составляют гидросферу. Жидкая вода, необходимая для всех известных жизненных форм, не существует на поверхности какой-либо из известных планет и планетоидов Солнечной системы, кроме Земли. Полюсы Земли покрыты ледяным панцирем, который включает в себя морской лёд Арктики и антарктический ледяной щит.





Планета является домом для миллионов видов живых существ, включая человека. Территория Земли разделена на 195 независимых государств, которые взаимодействуют между собой путём дипломатических отношений, путешествий, торговли или военных действий. Человеческая культура сформировала много представлений об устройстве мироздания — таких, как концепция о плоской Земле, геоцентрическая система мира и гипотеза Геи, по которой Земля представляет собой единый суперорганизм.



Айфрейм

Сайт американской корпорации «Эппл».

<a href="https://apple.com/" class="cartonbox" data-cb-type="iframe">...</a>

Также можно загрузить фрагмент страницы, указав через пробел селектор элемента, содержимое которого нужно отобразить, либо добавив параметр data-cb-fragment:

<a href="https://apple.com/ #content" class="cartonbox" data-cb-type="iframe">...</a> // или <a href="https://apple.com/" class="cartonbox" data-cb-type="iframe"     data-cb-fragment="#content" >...</a>

Видеогалерея

<a href="https://youtube.com/embed/yRuGhX791FQ?rel=0&showinfo=0&autoplay=1&wmode=transparent"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video16x9" >...</a> <a href="https://player.vimeo.com/video/79804777?autoplay=1&color=ffffff&title=0&byline=0&portrait=0"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video21x9" >...</a> <a href="https://vk.com/video_ext.php?oid=5713686&id=170265723&hash=5296394ecc50acbd&hd=2&autoplay=1"     class="cartonbox" data-cb-type="iframe" data-cb-group="video" data-cb-design="video16x9"     data-cb-hash="video" data-cb-caption="John Butler — Ocean" >...</a>

Настройка

var options = {     // Опции     wrap:    'body',   // Селектор или DOM-элемент, содержимое которого оборачиватся плагином.     speed:   200,      // Скорость анимации в милисекундах.     nav:     'dotted', // false отключает навигацию в виде точек.     cycle:   false,    // true включает зацикливание групповых модальных окон.     preload: true,     // false отключает предзагрузку контента в айфрейме.     // Функции обратного вызова     onStartBefore:  function() {},     onStartAfter:   function() {},     onLoadBefore:   function() {},     onLoadAfter:    function() {},     onShowBefore:   function() {},     onShowNow:      function() {},     onShowAfter:    function() {},     onClosedBefore: function() {},     onClosedAfter:  function() {},     onLeft:         function() {},     onRight:        function() {}, };

Методы

Инициализация. Пригодится если Картонбокс нужно запустить заново.

$.cartonbox('init', [options]);

Обновление. Нужно, например, если на странице динамически подгрузились новые элементы, которые необходимо открывать в модальном окне.

$.cartonbox('refresh');

Деинициализация. Полностью вычищает Картонбокс из кода.

$.cartonbox('destroy');

Поддержка браузерами

Плагин проверялся и стабильно работает в последних версиях браузеров:

Копирайты и лицензия

Плагин написан разработчиками дизайн-лаборатории «Конст Лаб» в 2015–2016 годах. Распространяется на беcплатной основе под лицензией MIT.

Где используется

Присылайте ссылки на ваши сайты в форме обратной связи, где вы используете Картонбокс и мы добавим их в список:

Обратная связь