Всплывающие окна. Colorbox
Очень часто у новичков возникает потребность выводить тот или иной контент во всплывающем окне.
Решил выложить инструкцию на эти случаи.
Основы
И так, нам понадобятся модули:
Качаем и устанавливаем согласно инструкций.
Теперь, для того чтоб вывести контент во всплывающем окне, достаточно добавить к ссылке на страницу с нужным контентом класс colorbox-node:
<a class="colorbox-node" href="/about">About</a>
После подобной манипуляции, нажав на ссылку откроется стандартное окно Colorbox с содержимым, находящемся по этой ссылке.
Обратите внимание, страница будет выведена без стандартных регионов Drupal, только основной контент страницы. Если нужно выводить полную страницу, или страницу другого сайта, можно использовать класс colorbox-load или colorbox-inline.
Дополнительно у нас есть возможность манипулировать размерами открываемого окна, добавив к ссылке параметры ширины и высоты:
<a class="colorbox-node" href="/about?width=600&height=400">About</a>
Теперь окно Colorbox откроется с размерами 600x400 px.
Так же можно указывать атрибут rel, и таким образом объединять несколько ссылок в галерею:
<a class="colorbox-node" rel="gallery" href="/about?width=600&height=400">About</a>
Добавление ссылок во Views
Рассмотрим как можно добавить ссылку из Представлений.
Для полей, которые можно выводить в качестве ссылки есть предустановленные настройки вывода в Colorbox:
Но, к счастью, Views'ом можно сделать ссылкой любое поле.
Для этого, в настройках поля включаем "Перезаписать результаты -> Выводить это поле в виде ссылки" и просто разносим все атрибуты по полям:
Комментарии
Спасибо, и надеюсь на продолжение.
Приходилось ли Вам делать прикреплять кнопки "поделиться в соц сетях" на подобные colorbox страницы? У меня есть такая задача, но реализовать пока не получилось. Индексируется контент не открывающего модального окна, а страницы, что под ним...
Благодарю, хорошая статья, всё чётко и понятно