Контакты

Fancybox for Wordpress – красивые изображения и функциональный контент одним щелчком мыши. Делаем галерею с jQuery плагином FancyBox

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

Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css

Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:



FancyBox - Фотогалерея


Одиночная картинка


Группа картинок (галерея изображений)





Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.

Теперь давайте рассмотрим параметры, которые мы можем задать при вызове fancybox, которые влияют на внешний вид и поведение фотогалереи. Для нашего эксперимента создадим аналогичный HTML- код (пример приводить не буду, он абсолютно идентичен приведенному выше) с той лишь разницей, что всем тегам присвоим класс gallery2 , и напишем для него следующую функцию (которую также поместим м/у тегами head):

$("a.gallery2").fancybox(
{
"padding" : 20,
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,
"frameWidth" : 700,
"frameHeight" : 600,
"overlayShow" : true,
"overlayOpacity" : 0.8,
"hideOnContentClick" :false,
"centerOnScroll" : false

Что все это значит:
padding - отступ контента (фотографий) от краев окна. В демке я поставил 20px, это, конечно, многовато, но зато наглядно;
imageScale - принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;
zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0) ;
zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
frameWidth - ширина окна, px (425px - по умолчанию);
frameHeight - высота окна, px(355px - по умолчанию);
overlayShow - (по умолчанию true) если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay
overlayOpacity - Прозрачность затемнения (0.3 по умолчанию);
hideOnContentClick - Если true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
centerOnScroll - Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.
Как мы видим в наших руках весьма гибкий инструмент для создания фотогалерей и не только...

Но не галереями един этот замечательный плагин. С помощью fancybox мы легко можем выводить не только фотографии в красивых окошках, но и другой контент.
Видео с Youtube (rutube, video.mail и т.д.)

Видео с youtube.com в модальном окне

Все очень просто. Мы в теге указали класс gallery, в атрибуте href идентификатор #testube . В контейнер div#testube поместили код ролика с youtube.

Погуглим?

Правда здесь есть одно "но". Класс обязательно должен иметь имя iframe . Соответственно на этот класс нам нужно повесить fancybox

$("a.iframe").fancybox(
{
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
});

Модальные окна с собственным контентом:

Реализуется аналогично с предыдущим примером:

Клик

Файл content.html содержит htm-код, который и будет выведен в модальное окно. Обратите внимание, что сам файл content.html не содержит в себе ни css-стилей, ни ссылок на них. На демонстрационной страничке между тэгами head я создал класс.green и текст в модальном окне (заключенный в

) получился зеленый.

Мы также в атрибуте href можем указать и php. Давайте реализуем это. Для этого создадим простой php-файл content2.php:

Вы открыли окно №

А на странице с нашими примерами напишем:

Свой контент в модальном окне вариант 2.


Первое окно

Второе окно

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

Теперь об одном большом нюансе , касательно вывода своего контента в модальных окнах.
Т.к. поисковики не понимают яваскриптов, для них наши модальные окна - просто новая страница. Нам следует подстраховаться, дабы ни один поисковик никому не дал прямую ссылку на такую страницу, но в тоже время контент модальных окон смог нормально проиндексировать.
Можно сделать так:

Свой контент в модальном окне вариант 2 с дублированием.


Первое окно

Второе окно

Где for_spider.php - это нормальная страница сайта, с подключенными стилями, скриптами. На этой странице мы будем выводить тот же самый контент, что и в модальном окне. Пускай ее и будут индексировать поисковики и на нее же попадают неадекватные посетители с отключенным javascript. . А для нормальных людей мы сделаем подмену. С помощью jquery мы заменим for_spider.php на content2.php. Между тегами head, после "$(document).ready(function() {" напишем следующий код:

Url = $("a.modalbox").attr("href").replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth" : 400,
"frameHeight" : 400

Что мы здесь делаем. У тегов мы "вытаскиваем" ссылку, заменяем в ней "for_spider" на "content2" и заносим в переменную url. Затем у этих же тегов мы заменяем атрибут href на новый(значение переменной url). Ну потом уже привычый нам запуск плагина fancybox. Как только на наш сайт зайдет посетитель, все ссылки на for_spider.php преобразуются в content2.php - на наши модальные окна.

На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!

Всем привет! Сегодня мы поговорим с вами о таком мощном и полезном инструменте, как библиотека FancyBox. Этот jQuery-плагин предоставляет возможность добавлять на страницы сайта систему всплывающих окон, известных еще как лайтбоксы (от англ. «lightbox»), модальные окна, попапы (от англ. «pop-up»). Формат всплывающих окон весьма востребован в веб-разработке и применяется для достижения различных целей. Библиотека позволяет: открывать в попапах html-код и txt-файлы, формы и информационные сообщения, контент из других источников с помощью Ajax-запросов, исполнять скрипты, воспроизводить видео с сервисов YouTube, vimeo и флеш-ролики.

А самый распространенный способ использования FancyBox на WordPress-блоге – увеличение изображений, как одинарных, так и объединенных в галерею. Примеры реализации всех вышеперечисленных вариантов можно найти на официальном сайте плагина — fancybox.net. А в данной статье мы рассмотрим, как легко интегрировать библиотеку в наш блог с помощью плагинов FancyBox For WordPress и Easy FancyBox и произвести их основные настройки. А также узнаем, как подключить FancyBox к WordPress без плагина.

FancyBox For WordPress: выводим картинки и галереи красиво

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

Для устранения такого неудобства и усовершенствования процесса отображения картинок на Вордпресс-блоге был разработан специальный плагин FancyBox For WordPress. Он служит тому, чтобы посетитель мог активировать кликом изображение, открывая его поверх остальных окон. Вот так:

Давайте установим плагин для нашего сайта из репозитория Вордпресс.


Активируем FancyBox for WP и он сразу же приступает к работе, применяя к картинкам свои базовые настройки. В этом мы можем убедиться, перейдя на наш блог, обновив его и кликнув по любому из имеющихся изображений.



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

Если FancyBox For WordPress не работает, а точнее картинки не кликабельны, проверьте, правильно ли выставлены настройки отображения файла при выборе картинки для загрузки в редакторе. Необходимо, чтобы в поле «Ссылка» было установлено «Медиафайл».


Кроме предустановленных опций, предполагаются и более гибкие настройки FancyBox For WordPress. Их мы можем найти в консоли ВП, в пункте меню «Настройки» — «FancyBox for WP». Перейдя по ссылке, мы видим большое количество вкладок, отвечающих за редактирование тех или иных параметров. Они связаны в основном с изменением внешнего вида отображения картинок. К сожалению, плагин полностью англоязычный. Но сейчас мы рассмотрим все самые интересные моменты, которые могут вам понадобиться, если дефолтные установки не соответствуют вашим потребностям.

Стартовая вкладка – «Info». Здесь размещены ссылки на информацию о разработчиках и продукте в целом. Создатели плагина говорят о том, что если вы не хотите вникать во все предложенные настройки, то и без этого базовый вариант установок дает достаточно привлекательный результат. Также они просят обратить внимание на то, что если после редактирования вы не заметили изменений моментально, это зачастую вовсе не значит, что FancyBox For WordPress не работает. Если у вас установлен плагин кэширования, например , то необходимо очистить кэш после сохранения изменений или деактивировать плагин на время работы с настройками.

Следующий таб – «Appearance». Это страница, где мы можем настроить под себя базовые опции, отвечающие за внешний вид всплывающих окон. Если чекбокс отмечен галочкой – функция включена, если же нет – отключена:

  • «Border» — выбираем, будет ли отображаться рамка вокруг модального окна. По умолчанию – нет. Если мы выбираем вариант «да», появляется дополнительно поле для выбора цвета границы, в шестнадцатиричном формате (#000000). Настроить ширину рамки возможности нет;
  • «Close Button» — определяем, будет ли в лайтбоксе кнопка закрытия окна (крестик) и где она будет располагаться (Left (слева)/ Right (справа)/ Bottom (внизу)/ Top (вверху)). Стартовое значение – справа вверху;
  • «Padding» — этот пункт отвечает за настройку в FancyBox For WordPress цвета и ширины отступа от края всплывающего окна до размещенного в нем изображения. Дефолтное значение – белый, 10 пикселей;
  • «Overlay Options» — устанавливаем характеристики заднего затемняющего фона, который появляется под всплывающей картинкой, покрывая контент всей страницы. Изначально определены: в качестве цвета – серый, в качестве прозрачности (opacity) – 0.3. Свойство прозрачности измеряется от 0.0 до 1.0, и чем меньше значение, тем прозрачней будет фон. Соответственно, если вы хотите полностью скрыть содержимое, оставшееся за модальным окном, можно выбрать opacity: 1;
  • «Title» — назначаем, будет ли выводиться подпись к изображению (т.е. значение атрибута title картинки) и каким образом. Здесь предусмотрены настройки месторасположения названия относительно отступа (padding) всплывающего окна (Inside (внутри)/ Outside (снаружи)/ Over (поверх)) и его цвет. В значениях «Inside» и «Outside» текст будет размещен в нижнем отступе модального окна и под ним соответственно. А при выборе варианта «Over» название расположится над нижним отступом, поверх самого изображения на темной полупрозрачной подложке;
  • «Navigation Arrows» — выбираем, показывать или нет стрелки навигации. Они появляются при наведении на изображение.

Переходим ко вкладке «Animations». Здесь мы настроим функции, отвечающие за контроль анимации всплывающих окон:

Обратите внимание, что данные установки могут быть применимы только для тех открывающихся/закрывающихся модальных окон, у которых в параметре «Transition Type» выбрано значение elastic.

После непосредственно полей с настройками плавности авторы FancyBox For WP предлагают нам перейти по ссылкам и посмотреть, как работают предложенные ими варианты функции easing. (Первая ссылка на текущий момент не доступна.)

Следующая вкладка – «Behavior Settings». Она отвечает за настройки поведения всплывающего окна и идет со статусом «medium». В связи с этим, разработчики FancyBox For WordPress предупреждают нас, что лучше оставить на этой странице все как есть, если только мы действительно не знаем, как работать с расположенными здесь параметрами. Поэтому мы не будем детально останавливаться на всех опциях. За что отвечает каждая из них, понятно из скриншота:

Пятый таб – «Galleries». Это продвинутый уровень настроек, касающихся галерей изображений:

  • «Make a gallery for all images on the page (default)» — создать галерею для всех изображений на странице (по умолчанию). То есть, если на странице находится несколько изображений, то они по умолчанию будут объединены плагином в галерею. Как результат, открыв в модальном окне любое из них, мы можем просмотреть и все остальные, пролистывая картинки;
  • «Do not group images in gallery automatically (use this if you want to make galleries manually with the rel attribute)» — не объединять картинки в галерею автоматически (используйте эту опцию, если хотите создать галерею вручную с помощью атрибута rel). Предлагаю детальней узнать, как эту опцию FancyBox For WordPress использовать на практике.

Допустим, что у вас на странице размещен материал, который условно разделен на несколько смысловых блоков. Например: в одном из них вы размещаете картинки для иллюстрирования , а в следующем — примеры наиболее удачных продающих страниц. И вы хотите, чтобы две эти группы изображений не смешивались в одном модальном окне, а выводились в разных лайтбоксах. Чтобы осуществить задуманное, для начала выберите опцию плагина «Do not group images in gallery automatically».

Теперь откройте нужную публикацию в редакторе и перейдите в режим «Текст», то есть тот, где отображается html-код. Найдите первую группу картинок и всем ссылкам (тег a) , в которые обернуто каждое из изображений (тег img ), присвойте атрибут с каким-то одинаковым для всех значением. Например: rel = «gal1».

Для второй группы медиафайлов повторите те же действия, но с другим значением rel, например: rel = «gal2»;


  • «Make a gallery for each post (will only work if your theme uses class = « post » on each post, which is common in WordPress)» — создать галерею для каждого поста (будет работать, только если ваша тема использует класс «post» для каждого поста, что характерно для Вордпресс);
  • «Use a custom expression to apply FancyBox» — применить пользовательское jQuery-выражение для настройки FancyBox For WordPress в случае, если предлагаемые плагином варианты вам не подходят и вы нуждаетесь в более гибких индивидуальных установках. Этот вариант лучше не использовать.

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

Уверенна, что всех приведенных выше инструкций вам будет достаточно для успешного интегрирования FancyBox For WordPress в ваш блог для эффектного отображения изображений в сплывающем окне.

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

Easy FancyBox: основные особенности плагина

Как и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.


Характерными же его отличиями являются:



Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;



Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.

Интеграция библиотеки FancyBox в Вордпресс без плагинов

Если вы трепетно относитесь к вопросу , то наверняка вас волнует скорость работы вашего блога. А мы знаем, что большое количество плагинов может замедлять процесс загрузки страниц. Поэтому далее мы рассмотрим вариант внедрения jQuery скрипта FancyBox на WordPress без плагина. Данный способ рекомендуется применять в том случае, если вы хорошо знакомы со и имеете опыт работы с кодом. В процессе могут возникать конфликты с другими скриптами темы, вызванные включением тех или иных опций. Решение этой проблемы в каждом отдельном случае будет индивидуальным, поэтому заранее предусмотреть все варианты сложно.

Для установки библиотеки файлы FancyBox можно найти и скачать по адресу — fancyapps.com/fancybox/. В разархивированном каталоге открываем папку source и копируем jquery.fancybox.css и jquery.fancybox. js , помещаем их в папку , которую необходимо предварительно создать в корне темы.


Открываем в текстовом редакторе файл functions. php , находим функцию подключения скриптов и вставляем следующий код:

1 2 3 4 5 // Fancybox stylesheet. wp_enqueue_style( "fancybox-style" , get_template_directory_uri() . "/fancybox/jquery.fancybox.css" , array () , " " ) ; // Fancybox script. wp_enqueue_script( "fancybox-script" , get_template_directory_uri() . "/fancybox/jquery.fancybox.js" , array ("jquery" ) , " " ) ;

// Fancybox stylesheet. wp_enqueue_style("fancybox-style", get_template_directory_uri() . "/fancybox/jquery.fancybox.css", array(), " "); // Fancybox script. wp_enqueue_script("fancybox-script", get_template_directory_uri() . "/fancybox/jquery.fancybox.js", array("jquery"), " ");


Затем открываем для редактирование файл темы header.php и в head помещаем вызов функции FancyBox:

1 2 3 4 5


А вот видео о настройке и использовании Fancybox:

Сегодня мы с вами познакомились с широко используемым на сайтах скриптом для красивого отображения картинок в лайтбоксах. Для простоты его интеграции в блог было разработано множество специальных плагинов. Мы рассмотрели одни из самых востребованных: Easy FancyBox и FancyBox For WordPress, узнали, как они работают и в чем их различия. Они проверены опытным путем и работают стабильно. Чтобы понять, какой из инструментов больше подходит вам по функционалу, определите основные задачи, которые он должен выполнять. Нет смысла выбирать тяжелый плагин, чтобы в дальнейшем задействовать только одну или две его опции.

С первого взгляда jQuery плагин FancyBox очень напоминает . Но у него есть несколько фишек, которые делают эту галерею достойной отдельной статьи.

Достоинства

  • Может отображать изображения, HTML-элементы, SWF-ролики, а также и результаты Ajax запросов.
  • Пользовательская настройка с помощью параметров и через .
  • Можно группировать несколько элементов и добавлять им навигацию.
  • Если подключить плагин jquery.mousewheel, то FancyBox будет также реагировать на события колеса мыши.
  • Поддержка разнообразных анимированных переходов, используя плагин jquery.easing.

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

Проверено в:

  • IE 6-8
  • Firefox 4
  • Opera 11
  • Safari 4
  • Chrome

Что качать?

  • библиотеку jquery качаем или .
  • (29.4 Kb) — сам плагин или его сжатая версия — (15.62 Kb).
  • (6.72 Kb) (не обязательно) для переходов.
  • (1.23 Kb) (не обязательно) поддержка колесика мыши.
  • (9.23 Kb) стили для галереи.
  • (34 Kb) картинки.

Быстрый старт

Подключаем библиотеки и таблицу стилей:

HTML очень правильный — маленькая картинка внутри ссылки на большую:

Если скрипты отключены, то при клике на ссылку просто откроется большая картинка. А если не отключены, то большая картинка откроется не просто, а в красивом, подстраивающемся под размер, отцентрированном окошке с тенькой. Да еще кнопочка «закрыть» будет. Да еще можно подпись из выводить. И много других приятностей есть. Красота да и только!

Для того, чтобы это все отработало, инициализируем галерею:

Конечно, в боевых условиях так огульно на все ссылки вешать плагин не стоит. Это я для примера показал. Лучше выбрать конкретные ссылки по классу, или, например, по родителю.

А теперь подробнее

Плагин очень гибко настраивается с помощью параметров и вызовов методов:

Доступные опции fancybox()

Название параметра Описание Тип значение по умолчанию
padding Пространство между контейнером FancyBox и контентом. integer 10
margin Пространство между областью просмотра и контейнером FancyBox. integer 20
opacity Если true, прозрачность контента меняется. boolean false
modal Если true, для "overlayShow" присваивается значение "true", а для "hideOnOverlayClick", "hideOnContentClick", "enableEscapeButton", "showCloseButton" присваивается значение "false". boolean false
cyclic Если true, галерея будет циклической, позволяя использовать для нажатия кнопки next/back. boolean false
scrolling Передает значение для для создания или скрытия полосы прокрутки. Может быть передано "auto", "yes", или "no". string "auto"
width Ширина для контента типов "iframe" и "swf". Также выставляет ширину для строчного контента, если "autoDimensions" имеет значение "false". integer 560
height Высота для контента типов "iframe" и "swf". Также выставляет высоту для строчного контента, если "autoDimensions" имеет значение "false". integer 340
autoScale Если true, FancyBox масштабируется для заполнения области просмотра. boolean true
autoDimensions Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. boolean true
centerOnScroll Если true, FancyBox центрируется, когда страница прокручивается. boolean false
ajax Опции Ajax. Заметка: "error" и "success" будут перезаписаны FancyBox. function { }
swf Параметры объекта swf. function {wmode: "transparent"}
hideOnOverlayClick Включает/ выключает закрытие FancyBox по клике на фоновое затемнение вокруг FancyBox. boolean true
hideOnContentClick Включает/ выключает закрытие FancyBox по клике на основном контенте. boolean false
overlayShow Определяет, показывать ли фоновое затеменение вокруг FancyBox. boolean true
overlayOpacity Прозрачность фонового затемнения. 0-1 0.3
overlayColor Основной цвет фонового затемнения. string "#666"
titleShow Включает/ выключает отображение title boolean true
titlePosition Позиционирование title. Может принимать значение "outside", "inside" или "over" string "outside"
titleFormat Обратная функция для пользовательской настройки области title. Можно задать любой HTML — свой счетчик изображений или даже пользовательскую навигацию. function null
transitionIn, transitionOut Тип переходов. Может быть установлен в "elastic", "fade" или "none". string "fade"
speedIn, speedOut Скорость перехода fade и elastic, в милисекундах. integer 300
changeSpeed Скорость изменения размеров при изменении элементов галереи в миллисекундах. integer 300
changeFade Скорость проявления контента во время смены элементов галереи. string "fast"
easingIn, easingOut Easing используемый для эластичных анимаций. string "swing"
showCloseButton Включает/ выключает показывание кноки закрытия. boolean true
showNavArrows Включает/ выключает показывание стрелок навигации. boolean true
enableEscapeButton Включает/ выключает закрытие FancyBox по нажатию но кнопке Esc. boolean true
onStart Функция, вызываемая перед попыткой загрузить контент. function null
onCancel Функция, вызываемая после отмены загрузки. function null
onComplete Функция, вызываемая один раз при отображении содержимого. function null
onCleanup Функция, вызываемая как раз перед закрытием. function null
onClosed Функция, вызываемая один раз перед закрытием FancyBox. function null

Продвинутые опции fancybox()

Общедоступные методы

Метод Описание
$.fancybox.showActivity Показывает загрузку анимации
$.fancybox.hideActivity Скрывает загрузочную анимацию
$.fancybox.next Отображает следующий элемент галереи
$.fancybox.prev Отображает предыдущий элемент галереи
$.fancybox.pos Отображает элемент галереи с заданным индексом
$.fancybox.cancel Отменяет загрузку контента
$.fancybox.close Скрывает FancyBox (для iframe используйте parent.$.fancybox.close());
$.fancybox.resize Автоматически изменяет размеры FancyBox: высота изменяется, чтобы соответствовать высоте контента
$.fancybox.center Центрирует FancyBox в области просмотра

Пример инициализации с параметрами

$(document).ready(function() { $("a.group").fancybox({ "transitionIn" : "elastic", "transitionOut" : "elastic", "speedIn" : 600, "speedOut" : 200, "overlayShow" : false }); });

Разные варианты работы плагина

Кроме простого увеличения картинки, плагин пожно использовать для мультимедиа:

Это покажет содержание элемента, который имеет id="data"

Это iframe

Это iframe

Это контент, который будет подгружаться с помощью ajax

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

Пример инициализации скрипта для галереи (атрибут title станет подписью картинки):

JQuery("a").fancybox({ "transitionIn" : "none", "transitionOut" : "none", "titlePosition" : "over", "titleFormat" : function(title, currentArray, currentIndex, currentOpts) { return "Image " + (currentIndex + 1) + " / " + currentArray.length + (title.length ? " " + title: "") + ""; } });

Желающих посмотреть этот код в живую еще раз отсылаю к .

Показ/скрытие title под наведению мыши

JQuery("a").fancybox({ "titlePosition" : "over", "onComplete" : function() { jQuery("#fancybox-wrap").hover(function() { jQuery("#fancybox-title").show(); }, function() { jQuery("#fancybox-title").hide(); }); } });

Кастомизация title

Function formatTitle(title, currentArray, currentIndex, currentOpts) { return "

" + (title && title.length ? "" + title + "" : "") + "Картинка " + (currentIndex + 1) + " из " + currentArray.length + "
"; } $("a").fancybox({ "showCloseButton" : false, "titlePosition" : "inside", "titleFormat" : formatTitle });

Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Создать красивую галерею ваших фотографий с возможностью просмотра во всплывающем окне - дело не сложное, если использовать jQuery плагин FancyBox.

Изложим план действий по созданию галереи:
1. Скачать архив плагина.
2. Создадим простую структуру галереи.
3. Подключим скрипты и стили плагина к нашей страничке с галереей.
4. Сделаем маленький скрипт, в котором привяжем наши картинки в одну галерею FancyBox.

1. Скачать архив плагина

Тут я думаю проблем не будет, переходим по ссылке:



Жмем на кнопу показанную на картинке и архив с плагином, будет скачан к вам на комп.

2. Создадим простую структуру галереи

Наша структура будет состоят из картинок завернутых в ссылки:

где class="fancybox" - единый класс для всех ссылок, по нему мы будем делать jquery выборку,
rel="gallery" в этом атрибуте указываем одинаковое название, т.к. по нему будут группироваться изображения в одну галерею при просмотре.

Вот полный HTML-код галереи из 4 картинок

3. Подключим скрипты и стили плагина к нашей страничке с галереей

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

4. Сделаем маленький скрипт, в котором привяжем наши картинки в одну галерею FancyBox

Содержимое файла script.js , в нем мы указываем класс селектора к которому подключаем jquery галерею fancybox:

$(document).ready(function() { $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); });

В файле стилей для нашей демо галереи будет несколько строк:

A {text-decoration: none;} .fancybox img { margin-bottom: 4px; max-width: 200px; max-height: 100px; }

Fancybox for Wordpress – интересный плагин для фреймворка jQuery , позволяющий быстро создавать красивые и удобные проекты. Он позволяет увеличивать картинку на сайте без перехода на пустую страницу, а также «связывать » изображения в единую галерею. Также имеется возможность прокрутки галереи с помощью колесика мыши. Кроме того Fancybox открывает модальное окно, в котором можно удобно просмотреть текст, swf -анимацию и прочее:

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


Инструкция по установке:

Скачайте плагин Fancybox и распакуйте его. Далее скопируйте файлы, включающие сценарий и стили. Обязательно убедитесь в наличии JS, CSS файлов на сервере и настройте пути в скриптах. Проверьте, загружена ли библиотека JQuery.

Примеры установки Fancybox-1.3.4

Скачиваем jquery.fancybox-1.3.4.zip распаковываем архив и устанавливаем себе в папку jquery.fancybox-1.3.4 . Внутри находим папку и заливаем ее на сервер. К примеру, в /wp-content/plugins/ . Ее содержимое должно попасть сюда - ваш сайт.ru/wp-content/plugins/fancybox/ .

Function my_css() { echo ""."\n"; } add_action("wp_head", "my_css", 5); if (!is_admin()) { wp_enqueue_script("fancybox", "/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js", "jquery", "1.3.4"); }

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

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

Сегодня существуют разные «zoom» для изображений, но у каждого из них имеются свои недостатки. К примеру, Thickbox и Lightbox затемняют фон, слишком большие и не очень привлекательные, да и как такового «эффекта зума » они не дают. Не так давно Cabel из Panic создал довольно интересный плагин FancyZoom , однако весит он более 150 Кб и к тому же платный.

Появление в этой ситуации стало настоящим чудом. Во-первых, плагин использует jQuery , который включается в стандартную поставку WordPress , во-вторых, весит всего 27 Кб:


Основные возможности Fancybox

К неоспоримым преимуществам плагина относят:

  • Возможность выбора 1 из 3 эффектов открытия/закрытия бокса с изображением;
  • Возможность выбора бокса в overlay (режиме наложения );
  • Реализацию мини-галереи картинок на странице;
  • Возможность просмотра галереи путем прокрутки колесика мыши;
  • Возможность использования плагина для отображения в боксе swf-анимаций и простого текста;
  • Возможность работы в режиме iframe (используется для открытия в боксе другого ресурса ).

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

Основные разновидности и версии Fancybox

Некоторые веб-мастера по-прежнему отдают предпочтение версии Fancybox 1.3.4 . Без сомнения версия 2 круче, быстрее и легче, но в ней отсутствуют те функции, благодаря которым можно интегрировать скрипт без внесения изменения во все посты блога. Для тех, кто между старым, надежным и новым, функциональным выбирает второе, хочется отметить несколько наиболее заметных изменений.

В вас ждет:

  • Расширенный набор вспомогательных функций;
  • Возможность использования слайд-шоу;
  • Высокая отзывчивость (всплывающие окна масштабируются в соответствии с размерами окна браузера );
  • Новый эффект переходов между картинками в галерее;
  • Использование CSS3 (скругление углов, тени и прочее );
  • Обновление настроек:


Почему может не работать Fancybox?

Причин возникновения проблем в работе плагина может быть несколько.

Самыми распространенными из них считаются:

  • Конфликт скриптов с другими скриптами (к примеру с PrestaShop );
  • Наличие ошибок Javascript в браузере;
  • Ошибка шаблона.

Не работает и по причине блокировки плагина брандмауэром, антивирусом или блокировщиком рекламы.

Основные параметры Fancybox

Параметры или, как их еще называют, ключи влияют на выполнение тех или иных задач. Они позволяют работать с такими типами контента как Ajax , ролики Youtube , Google maps , флеш-ролики swf , открывать контент в iframe . Изменить их значения можно непосредственно в :

Настройка Fancybox

Самые важные настройки Fancybox for WordPress находятся во вкладках Appearance , Animation и Behavior . С их помощью можно обеспечить соответствие визуального оформления картинок с общим дизайном сайта.

На вкладке Appearance можно произвести настройку цвета и включение рамки изображений (Border ). Настройка кнопки закрытия окна с картинкой, выбор положения и цвета внутреннего отступа производится в Button . Цвет, прозрачность и затемнение заднего фона можно отрегулировать в Overlay Options . Выбрать цвет и место выведения заголовка можно в Title . Navigation Arrows - стрелки навигации, перелистывания.

Скорость анимации и прозрачность картинок можно настроить в Zoom Options во вкладке Animation . Эффект растягивания или затухания выбираем в Transition Type . Подбор шаблона для эффектов осуществляется в Easing .

Во вкладке Behavior можно установить автоматическое растягивание картинки согласно размеру экрана (Auto Resize to Fit ), а также выбрать способ закрытия изображений (Close with «Esc», Close on OverlayClick, Close on ContentClick ) и зацикливание их показа (Cyclic Galleries ).

Fancybox имеет несколько настроек режимов вывода картинок, видов надписи над картинками, скорости перелистывания и т.д.

Рассмотрим, как производится настройка :

  • Как отобразить картинку?

Чтобы настроить отображение картинки, необходимо прописать следующий код:

В href следует указать путь к изображению, а в прописать превью.

  • Как отобразить группу изображений и реализовать галерею?

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

A rel= "group" href="images/111.jpg">

Нужно указать параметры отображения:

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

  • Как отобразить контент?

Плагин можно использовать для того, чтобы выводить контент в модальное окно.

Например:

Отображение контента

текст

По умолчанию контент скрыт - display:none . Но как только пользователь кликнет по ссылке, начинает отображаться контент div с ID , указанным в href :


В поле «Автоматическое определение » можно выбрать те форматы файлов, которые будут открываться в автоматически.

Настроить анимацию при открытии/закрытии можно в разделе «Поведение ». Чтобы перелистывать изображения с использованием мышки поставьте галочку «Включить скрипт для Mousewheel jQuery ».

Данная настройка будет отображаться только, если он активирован для PDF :


PDF -документ будет отображаться в плагине, после того как будет установлена галочка «Автоматическое определение » и в ссылке на файл дописано «»:

Ссылка на нужный файл

Все, что теперь требуется, – разместить на сайте ссылку на PDF -файл.


Что делать если не работает Fancybox for Wordpress?

Вы настроили плагин и внесли все изменения, а результата нет? Это не означает, что не работает Fancybox for Wordpress . Все, что от вас требуется - очистить кэш или и вовсе выключить его на время правок.

В случае возникновения ошибки «TypeError:$ is not a function », решить проблему поможет замена $ на jQuery .

Секреты работы с Fancybox:

  • Если уже имеется встроенный лайтбокс, это может спровоцировать конфликт с . В таком случае следует в настройках плагина в разделе «Медиа » снять галочку с поля «Изображения » и сохранить изменения;
  • Не рекомендуется подключать плагин в теме Chameleon , так как некоторые особенности темы начинают работать некорректно. Тем более, что тема Chameleon уже имеет свой лайтбокс;
  • Если в настройках в разделе «Ссылка » выбран «Медиафайл », то в момент нажатия на изображение одновременно откроется и картинка в , и галерея. Избежать этого можно, если установить значение «Страница вложения »;
  • Предотвратить опускание картинок вниз в момент прокрутки страницы можно, если убрать галочку в разделе Behaviour (Поведение ) с позиции Center on Scroll .

Установив и корректно настроив , вы сможете быстро и легко создавать красивые галереи и успешные проекты.

Понравилась статья? Поделитесь ей