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

На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!

Ранее я рассматривал внедрение , доступной в системе по умолчанию. Там упоминается дополнительный модуль Lightbox 2, что уже более 3-х лет не обновляется, поэтому пришлось позаботиться об альтернативе. Хороший вариант, с которым чаще всего доводилось сталкиваться — плагин Easy FancyBox. Он имеет более 300тыс. скачиваний, постоянно дорабатывается и не конфликтует с другими решениями (что немаловажно). Короче говоря, за пару последних лет меня не подводил. Не зря он числится в .

Как вы уже поняли, основная функция модуля — реализация всплывающего лайтбокса для всех медиафайлов в вашем веб-проекте. Он является модификацией традиционного скрипта FancyBox jQuery и обладает множеством полезных опций. Сразу после активации все PNG, JPG и GIF картинки начнут автоматически открываться во всплывающем окне с Lightbox эффектом (если только не указаны другие параметры).

• кроме базовой графики доступны форматы Webp и SVG;
• во всплывающем окне разрешается отображать видео с Vimeo, Youtube, Dailmotion;
• поддерживает PDF и Flash файлы;
• может работать с обычным HTML кодом и содержимым внешних страниц;
• совместим с базовой галереей Вордпресс, а также NextGEN;
• у вас не возникнет проблем с Imagemap’ами, бесконечным скроллом Jetpack и при задании лайтбокса пунктам меню;
• про автоматическую обработку картинок уже упоминалось выше;
• из доп.фишек есть автосрабатывание попапа при загрузке страниц веб-ресурса;
• допускается использование как — альтернативу Easy Modal (инструкция в описании в репозитории);
• в настройках можно выбрать эффекты открытия, цвет и прозрачной оверлея и некоторые другие визуальные параметры.

Для плагина Fancybox имеется премиальная версия за 12 баксов + последующей подпиской по 4 бакса в год. Из про фишек выделяются: дополнительные опции оформления и автосрабатывания попапа, эффекты слайдшоу, показ заголовка при наведении и т.п. Если вам хочется расширить базовые функции, почитайте об этом детальнее. Мне лично бесплатной версии хватает с головой.

Также на официальной странице модуля есть парочка вариантов почему не работает Fancybox в WordPress, это могут быть:

• конфликты с аналогичными похожими решениями;
• отсутствие wp_footer() в футере;
• некоторые проблемы с плагинами: All in One SEO Pack, jQuery Updater, а также и парочка других;
• конфликты с шаблонами — часто в премиальных есть свой скрипт для подобного эффекта (ниже рассмотрю эту ситуацию);

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

Процесс установки стандартный — скачиваете вручную отсюда или активируете через админку. Лайтбокс сразу подключится в имеющиеся на сайте картинки и галереи (открытие ссылок изображений должно быть установлено как медиафайлы).

Все доступные для правки параметры находятся в разделе «Настройки» — «Медиафайлы» под основным контентом.

Здесь есть несколько подпунктов:

• Media — выбор типов файлов, с которыми модуль будет срабатывать.
• Наложение — цвет/прозрачность и вывод оверлея (затемнения фона).
• Окно — рамка, заголовок, кнопка закрытия и параметры поведения окна.
• Miscellaneous (разное) — автоматический попал и опции совместимости с темами/плагинами.
• Images — задается расширения изображений для срабатывания, некоторые фишки оформления и галереи.

В общем, советую мельком просмотреть все опции дабы знать, что там есть. Если честно, в большинстве случае я ничего здесь не меняю — по умолчанию все отлично работает. Возле некоторых пунктов есть ссылки по типу «More options», свидетельствующие о существующих доп.возможностях в премиальной версии.

Много интересно найдете в официальном описании плагина Easy Fancybox — прокрутите контент до раздела FAQ. Там есть про вызов PDF, открытие контактной формы, обычного модального окна, Youtube видео и т.п.

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

Это реализуется через следующий код в файле функций темы (functions.php):

add_action("wp_enqueue_scripts", "my_conditional_fancybox", 0); function my_conditional_fancybox() { if (!is_page_template("page-menu.php")) { if (class_exists("easyFancyBox")) easyFancyBox::$add_scripts = false; } }

Здесь выполняется проверка!is_page_template(‘page-menu.php’) с , но вы можете использовать любые другие условные операторы — is_single, is_home, is_category и т.п. Установка переменной в значение False отключает модуль.

Итого. Плагин Fancybox в Вордпресс я ставлю практически всегда, когда нужно добавить простой лайтбокс на картинки и галерею. Он работает сходу после установки, как правило, не конфликтует с другими скриптами, имеет пару-тройку настроек и регулярно обновляется. Больше, в принципе, от него ничего и не нужно.

Кстати, если юзаете другие решения по данной задаче — напишите, интересно попробовать еще что-то.

Fancybox позволяет выводить в окне не только изображения, но и самый разнообразный контент: видео, iframe, HTML и др. Картинки можно прокручивать как кнопками вперед/назад, так и колесом мыши. Программа имеет несколько настроек режима вывода картинок, скорости перелистывания, вида надписей под картинками и др. Пример использования Fancybox для фотогалереи на сайте показан на рисунке (версия V.1.3.3 2010 года). Пример рабочий, кликайте на здоровье!

Важное замечание: если на вашем сайте используется несколько плагинов jQuery , то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
.
Не рекомендуется использовать на одной странице несколько разных версий jQuery , чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery , так как не все версии взаимозаменяемы.

Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. Размещаем их в соответствие с дизайном сайта, например, в нашем случае - это контейнер

Для него указываем класс class="gallery" . Если необходимо выводить несколько изображений в одной галерее, надо в каждую ссылку добавить атрибут rel="group_1" . Его значение может быть любым, но одинаковым для всех элементов одной галереи. Таким образом можно создать на странице несколько фотогалерей, давая им разные имена в атрибуте rel , например, group_1, group_2 и т.д. Для вывода одиночных изображений rel не нужен.

Важное замечание: если размер основного изображения (big.jpg ) больше размера экрана в браузере пользователя, то Fancybox автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Следовательно, для показанной вверху фотогалереи имеем следующий HTML-код:

Для настройки фотогалереи Fancybox откройте файл jquery.fancybox-1.3.3.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом его конце увидите доступные настройки, например:
overlayShow: true, //затемнение основной страницы (фон) true/false
overlayOpacity: 0.8, //прозрачность фона
overlayColor: "#777", //цвет фона
titleShow: true, //вывод надписей под изображениями
width: 560, //ширина окна
height: 340 //высота окна
и так далее...

Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров и после сохранения файла jquery.fancybox-1.3.3.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.

Вспомогательные картинки (вперед, назад, загрузка, выход и др.) расположены в папке images , и их также можно менять на ваше усмотрение.

Как сказано выше, кроме изображений, Fancybox может выводить в окне и другой контент, например, видео, iframe, HTML и др. Так как наша тема - создание фотогалереи на сайте, то подробно этот вопрос рассматривать не будем. При необходимости, вы легко найдете соответствующие инструкции в интернете, например, в статье Евгения Попова "FancyBox - фотогалерея + модальные окна ". Замечу только, что вывод другого контента также реализуется очень просто, и для примера, посмотрим, как c помощью Fancybox вывести содержимое любой HTML-страницы.

Для этого необходимо добавить несколько строк в размещенный вверху страницы код инициализации Fancybox :

$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
$("a.iframe").fancybox({ // выбор всех ссылок с классом iframe
width: 560 ,
height: 340
});
});

Для вывода HTML-страницы следует использовать следующую конструкцию ссылки:
Текст или картинка .

Размеры окна, в котором будет выведена страница, устанавливаются в коде инициализации (параметры width и height ), или аналогично в файле jquery.fancybox-1.3.3.js также параметрами width и height (см. выше).

Один из примеров использования Fancybox для вывода HTML-страницы рассмотрен в статье "

FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.

Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css

Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:

$(document).ready(function() {
$("a.gallery").fancybox();
});

FancyBox - Фотогалерея
Одиночная картинка

Группа картинок (галерея изображений)

Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.

На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!

Рассмотрим то, как действует Fancybox на JQuery и узнаем, как его настраивать.

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

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

Данный плагин обладает несколькими параметрами, с помощью которых можно отображать определенные элементы страниц. Рассмотрим, как можно настроить отображение картинки. Чтобы это сделать, пропишите следующий код:

Теперь в силу вступает сам плагин. Чтобы отобразить картинку, пропишем следующее.