Как подключить Fancybox в WordPress

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

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

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

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

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

Откроем файл 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 или любой удаленный сайт), а также сделать просмотр изображений с галереи.