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

0 ∞ 2

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

Содержание

Что такое Fancybox?

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

Что такое Fancybox?

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

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

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

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

Далее открываем файл functions.php, после чего добавляем такие строки:

function my_css() {
		echo '<link rel="stylesheet" type="text/css" href="http://ваш сайт.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');
	}

Сначала мы добавили шаблон сайта, а затем с помощью wp_enqueue_script (); добавили js-скрипт плагина, так чтобы он шел после основного jQuery.

Далее открываем файл header.php и перед </head> прописываем такой js-код вызова:

<script type="text/javascript">$(document).ready(function(){$('a[href^="http://ваш сайт.ru
/wp-content/uploads/"]:has(img)').fancybox({'hideOnCotentClick':true,'titleFromAlt':
true,'titlePosition':'outside','padding':'5','margin':'25'});});</script>
Адаптивные изображения WordPress без проблем

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

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

Зачем нужен Fancybox

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

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

Зачем нужен Fancybox

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

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

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

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

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

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

В Fancybox 2 вас ждет:

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

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

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

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

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

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

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

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

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

Настройка 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 имеет несколько настроек режимов вывода картинок, видов надписи над картинками, скорости перелистывания и т.д.

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

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

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

<script type="text/javascript">
$(document).ready(function() {
    $(".single_image").fancybox();
});
</script>

Далее пишем следующее:

<a class="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""></a>

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

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

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

a rel= "group" href="images/111.jpg"><img src="images/111.jpg" height="110"></a>
<a rel= "group" href="images/222.jpg"><img src="images/222.jpg" height="110"></a>
<a rel= "group" href="images/333.jpg"><img src="images/333.jpg" height="110"></a>
<a rel= "group" href="images/444.jpg"><img src="images/444.jpg" height="110"></a>
Как добавить скрытый контент на WordPress-сайт

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

<script type="text/javascript">
$(document).ready(function() {
    $("a[rel=group]").fancybox({
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'titlePosition' : 'over',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
        }
    });
});
</script>

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

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

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

Например:

<a id="content" href="#text" title="Заголовок">Отображение контента</a>
<div style="display: none;">
    <div id="text" style="width:400 px; height:100 px; overflow:auto;">
    текст
    </div>
</div>

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

<script type="text/javascript">
$(document).ready(function() {
    $("#content").fancybox({
        'titlePosition' : 'inside',
        'transitionIn' : 'none',
        'transitionOut' : 'none'
    });
});
</script>

Как настроить фон и окно?

Как настроить фон и окно?
Как настроить фон и окно? - 2

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

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

Как настроить PDF?

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

Как настроить PDF?

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

<a href= "http://ваш сайт" class= "fancybox-iframe"> Ссылка на нужный файл </a>

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

Как настроить видео с YouTube?

Как настроить видео с YouTube?

При нажатии на ссылку на видеоролик с YouTube он будет отображаться во всплывающем окне.

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

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

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

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

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

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