Видео в модальном окне. Drupal 7 +Fancybox.

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

Сейчас я вам попытаюсь всё подробно объяснить. С данной задачей в Drupal 7 легко позволяет справиться FancyBox. Это один из самых нужных плагинов для Jquery, а доблестные разработчики написали под Drupal 7 ещё и модуль, для удобной с ним работы.

Теперь по порядку. Скачиваем модуль FancyBox, для его работы требуется обновление Jquery, поэтому скачиваем ещё и Jquery update. Как упоминалось выше, модуль – это лишь инструмент управления данным плагином, поэтому скачиваем ещё и сам плагин.

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

 sites/all/libraries/

Местонахождение всех необходимых файлов у вас должно выглядеть по такому адресу:

sites/all/libraries/fancybox

Далее устанавливаем 2 выше скаченных модуля, как устанавливать модули в Drupal 7 читаем здесь.

После активации модулей нам необходимо произвести первоначальные настройки Jquery Update, а именно поменять используемую версию Jquery. Идём по пути «Конфигурация-> Разработка-> jQuery update» и меняем версию Jquery на более свежую с 1.5 на 1.7.

Остальные настройки можно не трогать. Сохраняем и переходим в настройки нашего плагина. Идём по пути «Конфигурация-> Интерфейс пользователя-> Fancybox», где перед нами откроется страница с множествами настроек, основные перечислю - с другими думаю сами разберётесь.

Различные настройки отображения окна, такие как скорость показа, размер, стиль вывода и многое другое находятся в разделе «Plugin Options»

Не поленитесь, потыкайте по настройкам, они дадут вам более точное понятие для чего что нужно. На этом наши настройки закончены. Теперь нам лишь осталось посмотреть как всё это работает на сайте. Давайте создадим произвольную страницу и впишем туда код, который и будет выводить наше видео в модальном окне:

Video #1

Сохраняем и смотрим, что получилось: у нас одна ссылка на странице, по клику на которой открывается модальное окно, внутри которого воспроизводится файл с Youtube.com.

Код вставки думаю объяснять не стоит и так всё понятно. К ссылке которая ведёт на видео с Youtube.com мы повесили класс

class="fancybox fancybox.iframe"  

Для работы плагина этого достаточно. Полный список возможностей и классов для вывода различных элементов в модальные окна можно посмотреть на официальном ресурсе. На этом всё.