Видео во всплывающем окне — скрипт Fancybox



Настройка скрипта Fancybox

Видео во всплывающем окне — скрипт Fancybox

Ещё одна статья по теме вывода видео с Youtube во всплывающем окне. Так сказать, для полноты картины.

Предыдущие записи по этой теме:

Есть ещё один старый, добрый скрипт для вывода контента во всплывающих окнах. Называется он Fancybox. Многие про него слышали, кто-то пользовался, но, как показывает практика, с настройками подружиться удалось далеко не всем.

В принципе, есть простой способ выяснить то, как реализованы разнообразные скрипты на том, или ином сайте.

Понравилось вам всплывающее окно с видео на каком-то сайте, или любое другое решение. Нажимаем комбинацию клавиш Ctrl+U и смотрим исходный код данной страницы. Обычно, все необходимые файлы подключаются в секции header, туда же размещают и дополнительные настройки. Реже, это реализуется в самом низу страницы, так сказать, для оптимизации скорости загрузки. Найти нужные файлы и настройки большого труда не составляет.

Ну а дальше, внедряете всё это дело на тестовой страничке, если работает, запускаете на нужном сайте, нет, ищем дополнительные настройки в файлах с расширением .js.

В большинстве случаев нужные файлы легко обнаруживаются и легко переносятся на свои ресурсы.

Так случилось и со скриптом Fancybox на этом сайте.

Сначала, для статьи Adobe Muse–уроки создания сайта в визуальном редакторе я реализовал вывод видео во всплывающих окнах без дополнительных файлов, простым кодом. Я это описал в статье Как вставить youtube видео во всплывающее окно без плагинов.

Но, в дальнейшем то, как выглядело всплывающее окошко и невозможность его изменять и адаптировать под разные устройства мне не понравилось. Да и на глаза попался хороший сайт с правильно подключённым скриптом Fancybox. Вот с него то я и скопировал все необходимые настройки.

Настройки Fancybox для видео во всплывающем окне

Сам скрипт можно скачать на официальном сайте Fancybox.

Дальше надо разместить эти файлы у себя на сайте. Чтобы не запутаться, лучше всего это сделать рядом с другими плагинами, по адресу http://ваш сайт/wp-content/plugins/

Ну а дальше всё просто. Сначала подключаем в файле header.php сами скрипты (до закрывающего тега /head):

Плюс, чуть ниже, задаём для всплывающих окон необходимые настройки (до закрывающего тега /head):

Всё, все подключения проведены. Теперь, для ссылки надо добавить необходимый класс class=»fancybox-media» и получается нужный результат. А можно сделать ещё и дополнительные настройки для вывода видео с Youtube. Вот как это реализовано у меня:

Вот и вся настройка скрипта Fancybox для видео во всплывающем окне. :good:

Конечно, пришлось пожертвовать скоростью загрузки страницы, подключив дополнительные файлы, но, на мой взгляд, оно того стоит. Окошко, действительно, получается весьма приличным, с адаптацией под различные расширения и возможностью управления.

Всем удачи и нестандартных творческих решений! :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Видео во всплывающем окне — скрипт Fancybox»

  1. lomaster:

    подгружаете библиотеку jQuery, скрипт с плагином Fancybox и его хелпер Media — я это буду делать перед закрытием тега в отдельном javasript-файле или непосредственно в документе прописываете вызов Fancybox для нашей ссылки

  2. Den:

    Все вроде встало хорошо, НО: при проигрывании видео пролистывает страницу наверх, а также сдвигает фон и некоторые элементы страницы. Второе вероятно из-за того, что браузер перестает учитывать полосу прокрутки при появлении окошка видео. Не посоветуйте что-нибудь? :unsure:

  3. Еще бы не забыть вставить ajax.googleapis

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)