Модуль Colorbox дозволяє інтегрувати Colorbox на Drupal. Для інтеграції на сайт потрібно бібліотека jquery (починаючи з 5 версії Drupal jquery вже вбудована в ядро drupal).
Викачуємо потрібні компоненти:
Модуль colorbox додає наступний функціонал на сайт:
- Інтеграція з Image field і Image styles
- Можливість вибору стилю відображення colorbox за замовчуванням, а також 5 попередньо стилів
- Можливість налаштування стилю відображення Colorbox для вашої теми за допомогою файлу colorbox.css
Функціонал, який забезпечувався б плагіном Colorbox:
- Підтримка зображень, груп зображень, slideshow, ajax, сатиричного і фреймового вмісту
- Налаштування зовнішнього оформлення через CSS
- Предзагрузкі фонових зображень, а також можливість предзагрузкі груп зображень
- Дійсний W3C код, відсутність глобальних js-переменниx
- Кросбраузерність (Firefox 2 3, Safari 3 4, Opera 9, Chrome, Internet Explorer 6, 7, 8 ...)
Установка модуля і плагіна colorbox на drupal 7
- Установка плагіна. Разархівіруем скачаний плагін colorbox. Перейменовуючи папку з плагіном в colorbox і копіюємо її в "sites / all / libraries" (якщо папки libraries немає, потрібно її створити.
- Установка модуля. Якщо ви ще не завантажили модуль colorbox з сайту drupal.org завантажуйте. Потім включаємо модуль в адмінці в розділі модулі.
Налаштування colorbox для drupal 7
Заходимо в розділ Конфігурація -> Медіа -> Colorbox. В даному розділі можна налаштувати зовнішній вигляд colorbox. У випадаючому меню Стиль можна вибрати попередньо встановлені стилі. Ви також можете встановити свій власний стиль. Зовнішній вигляд стилів:
Завантаження картинок з посилань
На даному етапі colorbox для зображень прекрасно працює. Для цього після установки чистимо кеш! Потім до заслання додаємо клас colorbox і вказуємо шлях на потрібне зображення. Наприклад так:
Завантаження контенту в colorbox
В налаштуваннях colorbox включаємо пункт Включити завантаження через Colorbox. Ця функція дозволяє відображати контент в режимі colorbox. Необхідно додати клас colorbox-load до потрібного посилання і додасть шлях виду:
[Path]? Width = 500height = 500iframe = true або [path]? Width = 500height = 500
Розглянемо приклад. При кліці на картинку відкриємо в режимі colorbox сторінку зі статтею:
Завантаження inline-контенту в colorbox
В налаштуваннях colorbox включаємо пункт Включити Colorbox для inline-елементів. Зазначу, що під inline-контентом в даному випадку мається на увазі будь-який вміст вбудоване в поточну сторінку. Наприклад, необхідно відобразити div з певною інформацією в рижимах colorbox якщо клікнути на посилання. Досить зробити цей контейнер прихованим і привласнити id:
Вид самої посилання: