Фотогалерея FancyBox — код и плагин для WordPress



Fancybox – скрипт фотогалереи, который выводит изображения, видеоролики, и любой другой медиа контент в красивом, всплывающем окне.

Устанавливаем фотогалерею FancyBox

Фотогалерея FancyBox — код и плагин для WordPress

Про скрипты фотогалерей и вывод картинок и видео во всплывающих окнах, на этом сайте, уже есть несколько статей. Кто не в курсе, может ознакомиться:

Тема эта актуальная, любому владельцу сайта хочется оформить свои статьи в современный, приятный для глаза, вид, поэтому, в этой статье рассмотрим ещё один популярный скрипт фотогалереи, под названием Fancybox.

Какой из этих скриптов лучше или хуже, однозначного ответа нет. Тут играют роль несколько факторов:

  • Во-первых, те задачи, которые вы решаете на своём сайте. Если у вас одно, два изображений в статье, и вам просто надо реализовать красивый вывод этих картинок во всплывающем окне, то, в принципе, особой роли нет в том, какой скрипт вы выберите. Они все работают стабильно, проверены уже не одним годом работы на множестве сайтов. Выбирайте то, что больше по душе, и не забивайте себе голову лишней информацией. А вот, если вам нужно получить во всплывающих окнах нужные параметры, у вас определённые требования к выводу изображений, видеороликам, или галерее, тут уже выбирать надо более тщательно. У каждого из этих скриптов фотогалерей свои особенности, кроме вас никто этот выбор не сделает. Смотрите, сравнивайте, выбирайте под свои задачи.
  • Во-вторых, это особенности вашего шаблона. На чистом сайте все эти скрипты работают прекрасно. А вот, с разными шаблонами, правильная работа, не всегда легко получается. Разработчики шаблонов иногда так постараются, что попробуй разберись. К примеру, у меня на одном из сайтов, прекрасно работал скрипт PrettyPhoto, как только надо было поставить Fancybox, начались нестыковки. Ну не хотел работать Fancybox, почти неделю голову ломал. Пока не продублировал два раза вывод скрипта и в хедере, и в отдельном файле, ничего не получалось. А так – заработало. Вот такие, иногда бывают задачки. Ниже, я подробнее распишу, что и как сделал.

Теперь переходим к установке скрипта Fancybox.

Фотогалерея FancyBox – установка с помощью кода

Начинать, желательно, со знакомства с сайтом разработчиков этого скрипта. Вот адрес, там и скачать можно нужные файлы, и посмотреть разнообразные возможности.

Сложностей с подключением возникнуть не должно, всё стандартно, как и с другими фотогалереями.

В секции head подключаем нужные файлы:

 

Для одиночного изображения добавляем в head код вызова:

 

А самому изображению добавляем class=”fancybox”:

 

Если нам нужно сделать галерею, то в head прописываем такой код:

 

А к группе изображений добавляем rel=”galery”:

 

Для вывода видеороликов с Youtube, Vimeo и других, нужно подключить ещё несколько файлов в секцию head:

 

А код вызова в head будет таким:

 

Сам ролик выводится добавлением class=”fancybox-media”:

 

Как видно, всё просто и понятно. Дальше, хочу поделиться своим опытом подключения скрипта Fancybox.

FancyBox не работает, как исправить?

Я уже говорил, что некоторые шаблоны напрочь не хотят работать со скриптом Fancybox. Установлен, изначально, тот же PrettyPhoto, и после подключения Fancybox, никакого вывода изображения или видеоролика во всплывающем окне не происходит.

Вот и у меня приключилась такая ситуация, ну не хочет видеоролик открываться в новом окне, перекидывает на сайт Youtube, и больше никак. Подключал и кодом, и с помощью плагинов, нет результата.

Пришлось действовать методом тыка. Нашел сайт, на котором скрипт Fancybox выводился в нужном, для меня, виде. Полез в код.

Обнаружил, что вывод скрипта не совсем стандартный, и размещен не в секции head, а размещен в отдельном js файле. Код такой:

 

Я его тупо скопировал, и разместил в файле custom.js своей темы после кода скрипта PrettyPhoto. Результат не появился.

Тогда я этот код продублировал в секции head, поместив между тегами <script type=»text/javascript»></script>. Всё заработало в том виде, в котором хотелось.

Сам видеоролик был выведен с добавлением class=”fancybox-media” и добавлением атрибутов для проигрывателя:

 

Смотрим итоговый результат: Видеоролик с Youtube. Кстати, весьма интересная работа, заслуженно претендует на звание одного из лучших социальных роликов, которые делали у нас в стране. :yes:

Вот такие манипуляции, иногда, приходится проделывать. Результат есть, может, кому и пригодится.

Установка fancyBox с помощью плагина для WordPress

Тем, кто не хочет заморачиваться манипуляциями с файлами и кодом, есть несколько удобных плагинов для движка WordPress.

Плагин Fancybox for WordPress

Fancybox for WordPress – пожалуй, самый популярный плагин для установки скрипта фотогалереи.

Установка простая. Через Поиск плагинов — ищём, устанавливаем и активируем.

В админке находим настройки плагина Параметры — Fancybox for WordPress. Наблюдаем такую картинку:

Плагин Fancybox for WordPress

Настройка плагина Fancybox for WordPress

Пугаться не стоит, всё, достаточно просто и понятно.

Appearance

  • Border – настройка рамки вокруг всплывающего окна. По умолчанию выключена.
  • Close Button – настраиваем кнопку закрытия всплывающего окна и её расположение.
  • Overlay Options – настраиваем цвет и прозрачность фона после вывода всплывающего окна.
  • Title – настраиваем вывод заголовка наших изображений и его расположение.
  • Navigation Arrows – настраиваем стрелки для навигации по изображениям.

Animation

  • Zoom Options – тут мы настраиваем время анимации и процент прозрачности
  • Transition Type – выбираем тип вывода эффектов при появлении изображений.
  • Easing – выбираем эффект для появления изображений.

Behavior

  • Auto Resize to Fit – меняется размер изображения в зависимости от размера окна браузера.
  • Center on Scrol – всплывающее окно будет выводиться строго по центру окна браузера.
  • Close on Content Click – всплывающее окно будет закрываться, если вы кликните по нему мышкой.
  • Close with «Esc» – всплывающее окно будет закрываться клавишей “Esc”.
  • Cyclic Galleries – вывод галереи будет зациклен.
  • Mouse Wheel Navigation – возможность листать картинки галереи с помощью колеса мыши.

Gallery

Gallery Type – выбираем тип вывода галереи. По умолчанию, все картинки, которые у вас есть в статье, будут выводиться в виде галереи. Если вам это не надо, можно сделать другие настройки.

Miscellaneuos

  • Dimensions – тут мы настраиваем автоопределение или заданные размеры картинок.
  • Load JavaScript in Footer – размещение кода вызова скрипта в футер. Полезная функция для увеличения скорости загрузки страницы.
  • Callbacks – тут мы можем включить функцию обратного вызова.

Extra Calls

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

Troubleshooting

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

Support

Вопросы о работе скрипта, которые оставляют пользователи на сайте разработчиков плагина Fancybox for WordPress

Uninstall

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

Плагин fancybox

Ещё один плагин для WordPress, у него настройки менее продвинутые, но, от этого он работает не хуже.

Через Поиск плагинов — ищем, скачиваем, активируем.

Настройки плагина можно найти в админке во вкладке ПараметрыМедиафайлы:

Плагин fancybox

Настройка плагина fancybox

Все настройки на русском языке, тут ничего сложного нет. Вы можете самостоятельно выбрать тип контента, который будет выводиться во всплывающем окне. Также можно настроить автоопределение ссылки на медиафайл, или самостоятельное добавление класса к ссылке на изображение или видеоролик.

Хороший, качественный, понятный плагин. Вопросов в настройке возникнуть не должно.

Вот такие способы подключения скрипта фотогалереи Fancybox. Надеюсь, эта статья поможет тем, кто хочет сделать свой сайт красивым, современным, функциональным. :good:

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

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

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

Поделиться:

Комментарии к “Фотогалерея FancyBox — код и плагин для WordPress

  1. Что то у меня не работает этот плагин.

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

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

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