Подключение jQuery Fancybox в WordPress без плагинов

Привет, ребята, давно не виделись уже, однако. Но вот он я! Сегодня решил рассказать о том, о чем меня часто спрашивают, а именно – с помощью какого плагина у меня показываются картинки на блоге? Я отвечаю – никакого плагина, исключительно ручная работа. Разумеется, за основу были взять готовые решения, которые я интегрировал в WordPress – речь идет про замечательный jQuery Fancybox.

Мне кажется, что Fancybox является более удачным и легким решением, нежели другие общепризнанные решения типа Lightbox. Не буду вдаваться в подробности и рассказывать почему, просто я так считаю и этого достаточно. И сегодня я вам расскажу, как очень быстро и легко подключить Fancybox в WordPress, а так же как его настроить.

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

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

Перед началом наших работ предлагаю позыркать на тёлочек, да и как же без сисек да в пятницу ^_^ Вам же такое нравится, да?

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

Скачать Fancуbox (дистрибутив версии 1.3.4)

За основу я брал актуальный на то время (время, когда я интегрировал данное решение на свой блог) архив jquery fancybox 1.3.4 – с ним мы и будем работать.

Сразу отвечу на возможный вопрос – А почему не fancyBox version 2? – Да, вторая версия более крутая, легкая и быстрая, но в ней убраны как раз те функции, без которых не получится интегрировать скрипт без внесения изменений в каждый пост на блоге. Поэтому будем пользоваться хоть и более старой, но надежной версией 1.3.4.

Скачать jquery.fancybox-1.3.4.zip

Установка Fancybox и подключение

1. Итак, мы скачали и распаковали архив себе на компьютер в папку jquery.fancybox-1.3.4
2. Внутри обозначенной папки есть еще одна папка под названием fancybox – ее надо залить на сервер, например, в папку с плагинами /wp-content/plugins/. Таким образом, нужное нам содержимое должно очутиться тут site.ru/wp-content/plugins/fancybox
3. Открываем редактор шаблона в админке и файл functions.php, в самое начало, например, добавляем следующие строки:

   function my_css() { echo '<link rel="stylesheet" type="text/css" href="https://site.ru/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.css" media="screen" />'."\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'); }

   function my_css() { echo '<link rel="stylesheet" type="text/css" href="https://site.ru/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.css" media="screen" />'."\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'); }

   Первой функцией мы добавляем в шаблон сайта css файл стилей, а функцией wp_enqueue_script (); мы безопасно добавляем сам js-скрипт fancybox, таким образом, чтобы он обязательно шел после подключенного основного jQuery.
4. Открываем в редакторе шаблона файл header.php и сразу перед </head> добавляем следующий js-код вызова:

   <script type="text/javascript">$(document).ready(function(){$('a[href^="http://site.ru/wp-content/uploads/"]:has(img)').fancybox({'hideOnContentClick':true,'titleFromAlt':true,'titlePosition':'outside','padding':'5','margin':'25'});});</script>

   <script type="text/javascript">$(document).ready(function(){$('a[href^="http://site.ru/wp-content/uploads/"]:has(img)').fancybox({'hideOnContentClick':true,'titleFromAlt':true,'titlePosition':'outside','padding':'5','margin':'25'});});</script>

5. Чистим кеш и перезагружаем любую страницу блога с картинками — наслаждаемся видами ;)

Настройка Fancybox и параметры

Самое сложное во всем этом безобразии это пункт номер 4. К его такому виду я пришел спустя месяц, после первой интеграции. Все гениальное не так и просто, как кажется :)

• 'a[href^="http://site.ru/wp-content/uploads/"]:has(img)' – этот код ограничивает применение вызова fancybox только на картинки и только те, которые загружены в директорию /wp-content/uploads/ блога, то есть это как раз картики, которые мы добавляем к постам. Без этого кода в модельном окне начинают открываться любые картинки присутствующие на сайте, в том числе и счетчики, и элементы дизайна, и все что угодно.
• 'hideOnContentClick':true – данный код активирует функцию закрытия всплывающего окна по клику. Без этого кода закрыть окно можно будет только нажав на крестик в правом верхнем углу открывшегося изображения, что, разумеется, очень неудобно и нелогично.
• 'titleFromAlt':true – как раз та функция, которой нас лишили в fancybox2 – функция, которая берет из атрибута alt картинки текст и показывает его как пояснение в модальном окне.
• 'titlePosition':'outside' – функция определяющая положение поясняющего текста, в данном случае это под картинкой. Может принимать значения 'outside', 'inside' или 'over' – проверьте каждый вариант и выберите понравившийся.
• 'padding':'5' – отступ изнутри, говоря более понятно, то эта настройка определяет ширину рамки.
• 'margin':'25' – отступ извне, определяет отступы модального окна от границ видимого пространства в браузере.
• Остальные параметры fancybox и их настройки вы можете подсмотреть на официальном сайте — fancybox.net/api — так же там описаны API методы, но я не уверен, что они вам пригодятся, но мало ли…

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

Будьте на связи, задавайте вопросы, оставляйте комментарии.