Помощь начинающим веб
разработчикам

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

25.09.2012

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

Сейчас я вам попытаюсь всё подробно объяснить. С данной задачей в 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"  

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

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (18)

Profile picture for user Anton
Владимир
19.10.2012

по пути «Конфигурация-> Разработка-> jQuery update» нет вкладки jQuery, а выбрасывает на вкладку "производительность". Соответственно поменять версию jQuery не могу. Можете посоветовать, что делать?

Profile picture for user pantey
pantey
19.10.2012

поставьте модуль Jquery update не "Recommended releases", а "Development releases", должно помочь...

Profile picture for user Anton
Сергей
01.12.2012

Поставил на вывод изображений, спасибо за урок, вывод работает, но перестал работать views, описание проблемы:
-Перезаписать результаты
-Заменить выводимое полем значением и на этом все, окошко не выпадает. Ставлю jQuery Version 1,5 вьюс работает, все выпадает, но тогда не работает fancybox. Подскажите, в чем дело, что не так?

Profile picture for user pantey
pantey
02.12.2012

да, эту проблему уже обсуждали на drupal.org , разрабы уверили, что в ближайшем релизе всё поправят. А пока как вариант, использовать для рабочего сайта Jquery 1.7 , а если необходимо поправить вьюху, то перевести на 1.5.

Profile picture for user Anton
Сергей
03.12.2012

Да, я таким путем и пошел пока,меняю версию. Спасибо.

Profile picture for user Anton
Довран
31.12.2012

У меня вообще не получилось настроить фансибокс! Пишет ошибка модуля fancybox.module строка 14, потом строка 76. Так и не понял почему! Делал все как описано выше!

Profile picture for user Anton
RomanVaneev
30.03.2013

Благодарю за уроки! Качество уроков просто прекрасное!
Сделал всё как написано, с твоей ссылкой работает "Трон наследия", а с моей нет (.
http://www.youtube.com/watch?v=T8lUEQc3RbM
и ещё вопрос: к сделать так, чтобы показывалась превьюшка видео рядом со ссылкой?
С уважением, Роман г. Тольятти

Profile picture for user Anton
Lamb
29.05.2013

ошибочный формат ссылки с youtube.. чтоб всё заработало выбирай embed mode..
http://www.youtube.com/embed/T8lUEQc3RbM

Profile picture for user Anton
ajsman
04.07.2013

всетаки как сделать так, чтобы привьюшка видеоролика была, а не просто текстовая ссылка?

Profile picture for user Anton
Юрий
03.02.2014

Здравствуйте! сделал как написано, но видео во фрейме не открывается...
Вместо этого происходит переход по ссылке.
Код ссылки копировал именно из Вашего примера.

Profile picture for user pantey
pantey
03.02.2014

если происходит переход по ссылке - то смотрите в сторону правильной настройки fancybox. Проверьте открываются ли у вас изображения через данный модуль.

Profile picture for user Anton
Alexes
17.02.2014

В настройках включите jquery.fancybox-media.js (само включение в настройках модуля) тогда будет работать .fancybox-media он позволяет втыкать все медийные ссылки

Profile picture for user Anton
oleg
08.07.2014

подскажите пожалуйста сделал webform через fankybox в итоге подгружается полностью страница с формой. как её темизировать ?
http://med.metko.ru/taxonomy/term/43
вот тут справа get a quote как узнать адресс страницы которая открывается что бы её темизировать ?

Profile picture for user pantey
pantey
08.07.2014

http://med.metko.ru/node/54

Profile picture for user Anton
oleg
08.07.2014

нифига не полувается ! вот адресс формы :
http://med.metko.ru/node/65
создаю файл node--65.tpl.php в нём пишу код:

и всё равно открывается в модальном окне вся страница ! да и без модального окна открывается вся страница с формой,а не просто форма ? ПОЧЕМУ И ЧТО НЕ ТАК ?(((

Profile picture for user pantey
pantey
08.07.2014

ваше название шаблона должно выглядеть как:

page--node--65.tpl.php

здесь подробнее http://drupalfly.ru/lesson/overlay_page_all

Profile picture for user Anton
oleg
08.07.2014

спс )

Profile picture for user Anton
Евгений81
11.11.2014

а что там нет как в колоброксе чтобы можно было во вьюхе это все настроить без всяких классов?

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии