Подключение FancyBox в Wordpress без плагинов

Опубликовано: 08.10.2017

видео Подключение FancyBox в Wordpress без плагинов

Easy FancyBox - бесплатная и легкая галерея Wordpress с эффектом Lightbox

Уже давно стало довольно популярным явлением открытие картинок в модальных окнах (когда при клике на миниатюру открывается в всплывающем окне полный увеличенный размер картинки). Для вордпресс существуют множество готовых плагинов для реализации подобных эффектов, например LightBox. Но в этой статье я хочу описать метод реализации такого эффекта, с помощью подключения FancyBox в Wordpress, при этом не используя плагинов.



И так, подключать будем FancyBox2. Не знаю, будет ли дальше поддерживаться версия 1.3.x поэтому ставить будем вторую "ветку" (скачать можно по ссылки в конце статьи).

После того как вы скачаете архив, создадим в папке нашего шаблона папку "fancybox" и скопируем в нее следущие файлы:

jquery.fancybox.css jquery.fancybox.pack.js А также все графические файлы (на момент написания статьи их должно быть 4) Хочу сразу отметить, что подключать будем Fancybox используя его минимальные возможности.

Теперь, когда мы скопировали все файлы - приступим непосредственно, к настройке нашего шаблона для работы с Fancybox.


Как создать галерею на wordpress без плагинов

Откроем файл header.php и подключим в него jQuery плагин fancybox и его файл стилей. Следующий код нужно вставить перед закрывающимся тегом </head>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/fancy/jquery.fancybox.css" /> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancy/jquery.fancybox.pack.js"></script>

<?php bloginfo('template_url'); ?> - данная функция в ссылках отображает путь в папку вашего шаблона Если по каким-то причинам, на вашем сайте не подключен jQuery, то в этом случае, перед добавлением нашего html кода вам следует подключить библиотеку jquery:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> Далее, нужно добавить ко всем изображениям атрибут rel="fancybox" (можно, конечно, добавлять и класс, но мне почему-то, привычнее именно rel). Для этого откроем файл functions.php и добавим в его конец сниппет, который автоматически будет добавлять атрибут ко всем ссылкам с изображениями в ваших записях. add_filter('the_content', 'my_fancyboxrel'); function my_fancyboxrel($content) { global $post; $pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 rel="fancybox" title="'.$post->post_title.'"$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; } Теперь наши ссылки на изображения будут иметь вид: <a href="ссылка_на_полное _изображение" rel="fancybox"><img src="ссылка_на_миниатюру_изображения" title="тайтл_записи" /></a> Остается только подключить js функцию fancybox к нашему шаблону. Для это, сразу после тега <body> вставляем следующее: <script type="text/javascript"> jQuery(document).ready(function() { jQuery('a[rel="fancybox"]').fancybox(); }); </script> На этом процедура подключения Fancybox в Wordpress без использования плагинов. Окончена. Как я выше уже писал, мы подключили FancyBox с его миниальными возможностями. О всех возможностях вы сможете прочесть на страничке загрузки jQuery плагина. Ну, а как использовать дополнительные возможности, я очень коротко, напишу: Например мы не хотим выводить title нашей картинки. В этом случае наш код будет выглядеть так: jQuery('a[rel="fancybox"]').fancybox({ helpers: { title : false, } });

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