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

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

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

Что такое Fancybox?

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

Fancybox for WordPress – красивые картинки и функциональный контент одним щелчком мыши Инструкция по установке:

Скачайте плагин 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>

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

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

Зачем нужен Fancybox

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

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

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

Основные функции Fancybox

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

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

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

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

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

В Fancybox 2 вас ждет:

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

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

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

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

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

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

Основные настройки Fancybox

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

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

Параметр 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>

Необходимо указать настройки выведения:

<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>

Как изменить фон и окно?

Fancybox for WordPress – красивые картинки и функциональный содержимое одним щелчком мыши
Fancybox for WordPress – красивые картинки и функциональный контент одним щелчком мыши
В поле ввода «Автоматическое определение» можно без труда выбрать те форматы файлов, которые будут открываться в FancyBox автоматом.

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

Как изменить PDF?

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

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

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

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

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

Fancybox for WordPress – красивые картинки и функциональный содержимое одним щелчком мыши
При нажатии на ссылку на видеоролик с YouTube он будет выводиться во всплывающем окне.

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *