Fancybox for wordpress

FancyBox

Всем привет! Сегодня мы поговорим с вами о таком мощном и полезном инструменте, как библиотека FancyBox. Этот jQuery-плагин предоставляет возможность добавлять на страницы сайта систему всплывающих окон, известных еще как лайтбоксы (от англ. «lightbox»), модальные окна, попапы (от англ. «pop-up»). Формат всплывающих окон весьма востребован в веб-разработке и применяется для достижения различных целей. Библиотека позволяет: открывать в попапах html-код и txt-файлы, формы и информационные сообщения, контент из других источников с помощью Ajax-запросов, исполнять скрипты, воспроизводить видео с сервисов YouTube, vimeo и флеш-ролики.

А самый распространенный способ использования FancyBox на WordPress-блоге – увеличение изображений, как одинарных, так и объединенных в галерею.  Примеры реализации всех вышеперечисленных вариантов можно найти на официальном сайте плагина  — fancybox.net. А в данной статье мы рассмотрим, как легко интегрировать библиотеку в наш блог с помощью плагинов FancyBox For WordPress и Easy FancyBox и произвести их основные настройки. А также узнаем, как подключить FancyBox к WordPress без плагина.

Содержание:


  1. FancyBox For WordPress: настройки и возможности
  2. Easy FancyBox для WordPress: основные отличия плагина
  3. Как внедрить библиотеку без плагинов?

FancyBox For WordPress: выводим картинки и галереи красиво

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

Для устранения такого неудобства и усовершенствования процесса отображения картинок на Вордпресс-блоге был разработан специальный плагин FancyBox For WordPress. Он служит тому, чтобы посетитель мог активировать кликом изображение, открывая его поверх остальных окон.  Вот так:


Плагин FancyBox For WordPress

Давайте установим плагин для нашего сайта из репозитория Вордпресс.

FancyBox for WP

Активируем FancyBox for WP и он сразу же приступает к работе, применяя к картинкам свои базовые настройки. В этом мы можем убедиться, перейдя на наш блог, обновив его и кликнув по любому из имеющихся изображений.

Fancybox for wordpress

FancyBox

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

Если FancyBox For WordPress не работает, а точнее картинки не кликабельны, проверьте, правильно ли выставлены настройки отображения файла при выборе картинки для загрузки в редакторе. Необходимо, чтобы в поле «Ссылка» было установлено «Медиафайл».


FancyBox For WordPress не работает

Кроме предустановленных опций, предполагаются и более гибкие настройки FancyBox For WordPress. Их мы можем найти в консоли ВП, в пункте меню «Настройки» — «FancyBox for WP». Перейдя по ссылке, мы видим большое количество вкладок,  отвечающих за редактирование тех или иных параметров. Они связаны в основном с изменением внешнего вида отображения картинок. К сожалению, плагин полностью англоязычный. Но сейчас мы рассмотрим все самые интересные моменты, которые могут вам понадобиться, если дефолтные установки не соответствуют вашим потребностям.

настройки FancyBox For WordPress

Стартовая вкладка – «Info». Здесь размещены ссылки на информацию о разработчиках и продукте в целом. Создатели плагина говорят о том, что если вы не хотите вникать во все предложенные настройки, то и без этого базовый вариант установок дает достаточно привлекательный результат. Также они просят обратить внимание на то, что если после редактирования вы не заметили изменений моментально, это зачастую вовсе не значит, что FancyBox For WordPress не работает. Если у вас установлен плагин кэширования, например Hyper Cache, то необходимо очистить кэш после сохранения изменений или деактивировать плагин на время работы с настройками.

Следующий таб – «Appearance». Это страница, где мы можем настроить под себя базовые опции, отвечающие за внешний вид всплывающих окон. Если чекбокс отмечен галочкой – функция включена, если же нет – отключена:


  • «Border» — выбираем, будет ли отображаться рамка вокруг модального окна. По умолчанию – нет. Если мы выбираем вариант «да», появляется дополнительно поле для выбора цвета границы, в шестнадцатиричном формате (#000000). Настроить ширину рамки возможности нет;
  • «Close Button» — определяем, будет ли в лайтбоксе кнопка закрытия окна (крестик) и где она будет располагаться (Left (слева)/ Right (справа)/ Bottom (внизу)/ Top (вверху)). Стартовое значение – справа вверху;
  • «Padding» — этот пункт отвечает за настройку в FancyBox For WordPress цвета и ширины отступа от края всплывающего окна до размещенного в нем изображения. Дефолтное значение – белый, 10 пикселей;
  • «Overlay Options» — устанавливаем характеристики заднего затемняющего фона, который появляется под всплывающей картинкой, покрывая контент всей страницы. Изначально определены: в качестве цвета – серый, в качестве прозрачности (opacity) – 0.3. Свойство прозрачности измеряется от 0.0 до 1.0, и чем меньше значение, тем прозрачней будет фон. Соответственно, если вы хотите полностью скрыть содержимое, оставшееся за модальным окном, можно выбрать opacity: 1;

  • «Title» — назначаем, будет ли выводиться подпись к изображению (т.е. значение атрибута title картинки) и каким образом. Здесь предусмотрены настройки месторасположения названия относительно отступа (padding) всплывающего окна (Inside (внутри)/ Outside (снаружи)/ Over (поверх)) и его цвет. В значениях «Inside» и «Outside» текст будет размещен в нижнем отступе модального окна и под ним соответственно. А при выборе варианта «Over» название расположится над нижним отступом, поверх самого изображения на темной полупрозрачной подложке;
  • «Navigation Arrows» — выбираем, показывать или нет стрелки навигации. Они появляются при наведении на изображение.

Внеся изменения, не забываем их сохранить, нажав кнопку «Save Changes» внизу страницы.  Здесь же мы имеем возможность вернуть все настройки FancyBox For WordPress по умолчанию, кликнув для этого по ссылке «Revert to defaults».

настройки FancyBox For WordPress

Переходим ко вкладке «Animations». Здесь мы настроим функции, отвечающие за контроль анимации всплывающих окон:

  • «Zoom Options» — выбираем, будет ли во время увеличения и уменьшения изображения изменяться степень его прозрачности. В этом же пункте плагин FancyBox For WordPress дает нам возможность гибко настроить скорости зума:плагин FancyBox For WordPress

  • «Transition Type» — устанавливаем вид анимации для открывающегося модального окна (первое поле) и закрывающегося. На выбор доступны три значения: fade (по умолчанию) – затухание/проявление, elastic – эластичный, none – без анимации. Хотелось бы уточнить, что вариант elastic для открывающегося попапа подразумевает анимацию, при которой изначальная, меньшая по размеру, картинка выдвигается на передний план из исходного положения, как бы подстраиваясь под размер экрана и заполняя его собой. При закрытии лайтбокса происходит то же самое в обратном порядке;
  • «Easing» — в этом пункте мы можем подключить к анимации функцию плавности и выбрать один из ее многочисленных вариантов отдельно для открытия окон, закрытия и перехода между слайдами. О чем идет речь? Данная функция устанавливает скорость протекания анимации на разных ее этапах, что делает ее более реалистичной. Ведь в жизни действие, производимое объектом, не начинается молниеносно и не поддерживает одну и ту же скорость до момента окончания.

Обратите внимание, что данные установки могут быть применимы только для тех открывающихся/закрывающихся модальных окон, у которых в параметре «Transition Type» выбрано значение elastic.

После непосредственно полей с настройками плавности авторы FancyBox For WP предлагают нам перейти по ссылкам и посмотреть, как работают предложенные ими варианты функции easing. (Первая ссылка на текущий момент не доступна.)


FancyBox For WordPress

Следующая вкладка – «Behavior Settings». Она отвечает за настройки поведения всплывающего окна и идет со статусом «medium». В связи с этим, разработчики FancyBox For WordPress предупреждают нас, что лучше оставить на этой странице все как есть, если только мы действительно не знаем, как работать с расположенными здесь параметрами. Поэтому мы не будем детально останавливаться на всех опциях. За что отвечает каждая из них, понятно из скриншота:

как использовать FancyBox For WordPress

Пятый таб – «Galleries». Это продвинутый уровень настроек, касающихся галерей изображений:

  • «Make a gallery for all images on the page (default)» — создать галерею для всех изображений на странице (по умолчанию). То есть, если на странице находится несколько изображений, то они по умолчанию будут объединены плагином в галерею. Как результат, открыв в модальном окне любое из них, мы можем просмотреть и все остальные, пролистывая картинки;
  • «Do not group images in gallery automatically (use this if you want to make galleries manually with the rel attribute)» — не объединять картинки в галерею автоматически (используйте эту опцию, если хотите создать галерею вручную с помощью атрибута rel). Предлагаю детальней узнать, как эту опцию FancyBox For WordPress использовать на практике.

Допустим, что у вас на странице размещен материал, который условно разделен на несколько смысловых блоков. Например: в одном из них вы размещаете картинки для иллюстрирования процесса создания Landing Page на WP, а в следующем — примеры наиболее удачных продающих страниц. И вы хотите, чтобы две эти группы изображений не смешивались в одном модальном окне, а выводились в разных лайтбоксах. Чтобы осуществить задуманное, для начала выберите опцию плагина «Do not group images in gallery automatically».

 Теперь откройте нужную публикацию в редакторе и перейдите в режим «Текст», то есть тот, где отображается html-код. Найдите первую группу картинок и всем ссылкам (тег a), в которые обернуто каждое из изображений (тег img), присвойте атрибут с каким-то одинаковым для всех значением. Например: rel = «gal1».  

Для второй группы медиафайлов повторите те же действия, но с другим значением rel, например: rel = «gal2»;

настройки FancyBox For WordPress : обзор


  • «Make a gallery for each post (will only work if your theme uses class = «post» on each post, which is common in WordPress)» — создать галерею для каждого поста (будет работать, только если ваша тема использует класс «post» для каждого поста, что характерно для Вордпресс);
  • «Use a custom expression to apply FancyBox» — применить пользовательское jQuery-выражение для настройки FancyBox For WordPress в случае, если предлагаемые плагином варианты вам не подходят и вы нуждаетесь в более гибких индивидуальных установках. Этот вариант лучше не использовать.

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

Уверенна, что всех приведенных выше инструкций вам будет достаточно для успешного интегрирования FancyBox For WordPress в ваш блог для эффектного отображения изображений в сплывающем окне.

Но нельзя не обратить внимание на то, что в интернете периодически появляются жалобы пользователей на уязвимость плагина, которая ведет к заражению сайтов вирусами даже без доступа к админке Вордпресс и хостингу. Если вы столкнулись с проблемой взлома вашего веб-ресурса, важно как можно быстрее проверить и очистить вирусы с сайта. Я же хочу предложить вам альтернативный вариант для выведения картинок в лайтбоксах. И далее мы познакомимся с плагином, составляющим основную конкуренцию FancyBox для ВП. Именно он используется на страницах моего блога.

Easy FancyBox: основные особенности плагина


Как и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.

Easy FancyBox для WordPress

Характерными же его отличиями являются:

  • плагин частично русифицирован, поэтому разобраться в его настройках самостоятельно не составит большого труда;
  • при базовых установках картинки автоматически не объединяются в галереи, Easy FancyBox выводит во всплывающем окне только то изображение, по которому кликнули. Чтобы отобразить группу файлов в лайтбоксе, необходимо создать стандартную галерею Вордпресс в режиме редактирования записи.Easy FancyBox

Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;

Easy FancyBox для Вордпресс

  • в варианте «из коробки» Easy FancyBox размещает поверх изображений название, взятое из атрибута alt. Чтобы отключить эту опцию, в блоке «Appearance» снимите галочку возле поля «Показать название»;Easy FancyBox: настройки
  • плагин позволяет выбрать тип медиафайлов, которые будут открываться в модальном окне.Easy FancyBox: функции

Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.

pro-wordpress.ru

Настройки плагина

Для большинства настроек предусмотрены стандартные чекбоксы типа default: on/off. В некоторых случаях они по умолчанию включены или выключены.

Fancybox for WordPress

Info

Информация о разработчиках и общие рекомендации по плагину Fancybox for WordPress.

Appearance

Border — настройка цвета и включение (по умолчанию выключена) рамки выводимых изображений. Close Button — настройка кнопки закрывания окна с изображением, ее положения (верху, внизу, слева, справа) и цвет для внутреннего отступа. Overlay Options — настройка (цвет и прозрачность) затемняющего, заднего фона во время вывода изображения. Title — заголовок и настройка его цвета и места вывода относительно картинки. Navigation Arrows — показ стрелок навигации (перелистывания).

Animation

Zoom Options — настройка скорости анимации и прозрачности выводимых картинок. Transition Type — тип (затухание или растягивание) используемых эффектов при закрытии и открытии изображения. Easing — подробный выбор одного из множества типов шаблонов для эффектов.

Behavior

Auto Resize to Fit  — автоматически растягивать изображение под размер экрана. Center on Scroll — центрировать картинку в центре экрана. Close on Content Click — закрытие картинки кликом в любом месте на ней. Close on Overlay Click — закрытие картинки кликом по фону. Close with «Esc» — закрывать картинку нажатием соответствующей клавиши на клавиатуре. Cyclic Galleries — зациклить показ картинок по кругу в рамках одной галереи. Mouse Wheel Navigation — листать картинки в галерее колесиком мыши.

Gallery

Gallery Type — выбираем один из способов показа галерей. По умолчанию выбран первый — прокрутка галереи всех изображений в одном посте. То есть, если у вас в одной записи присутствуют несколько изображений, то открыв любой из них вы можете листая, просмотреть и все остальные. Другие три пункта — для более тонкой настройки вывода изображений в галереях. Рекомендую оставить первый пункт.

Miscellaneuos

Dimensions — Автоопределение размеров и ручная настройка размера для выводимых изображений. Load JavaScript in Footer — дополнительная настройка для использования с плагином Parallel Load. Callbacks — включение функции обратного вызова.

Extra Calls

Здесь вы можете добавить вызовы FancyBox, с дополнительными настройками. Для получения информации используйте API FancyBox.

Troubleshooting

[wp-pic type=»plugin» slug=»fancybox-for-wordpress» align=»right» ]

Рекомендации автора плагина по возможным проблемам. Суть сводится к известному методу поочередного отключения прочих плагинов для выявления причин конфликта.

Support

Поддержка плагина. Автор отсылает всех к FAQ на официальной странице плагина. Или просит отправлять ему сообщения о проблемах с указанием сайта и подробным описанием.

Uninstall

Для полного удаления всех следов плагина из таблиц данных WordPress используйте чекбокс на этой странице.

Самые необходимые настройки плагина Fancybox for WordPress как видите, собраны во вкладках Appearance, Animation и Behavior. Кстати, именно с помощью них можно добиться соответствия визуального оформления изображений с общим дизайном вашего сайта.
Остальные настройки автор рекомендует еще на странице Info, не трогать без особой необходимости и хорошего понимания своих действий.

Рекомендую так же ознакомится с обновленной статьей — Lightbox Plus ColorBox — выводим изображения

 

wpnice.ru

Что такое Fancybox?

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

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

Скачайте плагин 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, после чего добавляем такие строки:

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

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

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

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

Зачем нужен Fancybox

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

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

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

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

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

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

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

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

В Fancybox 2 вас ждет:

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

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

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

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

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

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

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

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

Настройка 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:

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.internet-technologies.ru

Вступление

WordPress коробочной установки имеет отличный инструментарий для работы с фотографиями,  размещением фотографий и других медиафайлов в материалах сайта. С развитием WordPress улучшается и показ фото и галерей сайта. Есть практически все варианты показа фотографий: создание галерей с автоматическим изменением размеров миниатюр, показ фото на новой странице и на новой вкладке, изменение размеров фотографий и т.д. Есть всё, только нет показа фотографий в модальных окнах – окнах появляющихся в отдельном окне поверх статьи.

Easy FancyBox плагин модального окна медифайлов WordPress сайта

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

В статье «14 Плагинов для эффекта Lightbox на сайте WordPress» я писал о плагинах всплывающих окон. Большинство из них я устанавливал, переустанавливал, пока не попробовал плагин Easy FancyBox. О нём поговорим далее.

EasyFancyBox-внешний-вид

Скачать и установить плагин

Устанавливаем плагин из административной панели сайта, на вкладке Плагин→Добавить новый. Если такая установка не возможна, скачиваем плагин на официальной странице плагина: https://wordpress.org/plugins/easy-fancybox/, распаковываем  и заливаем в каталог /plugins.

После активации плагина, он не появляется в консоли отдельной строкой. В его настройки можно войти с вкладки Плагины→ Easy FancyBox→Настройки или Медиафайлы.

Органичное вписывание настроек Easy FancyBox в общие настройки медиафайлов WordPress, подкупает и усиливает доверие к плагину.

Настройки плагина Easy FancyBox

Открыв страницу настроек, видим, что все необходимые, минимальные настройки выставлены. Настроек не мало, но при их использовании, нужно помнить, что некоторые из них увеличат загрузку страниц со стороны клиента.

После активации плагина все фотографии (jpeg, png, gif) вставленные в статьи будут показываться в модальных окнах поверх статьи, если:

  • При вставке фото выставлена ссылка на медиафайл, а не на страницу вложения;
  • Размер фото уменьшен по сравнению с оригиналом.

Можно настроить:

  • Выбор из трех эффектов открытия/закрытия модального окна;
  • Возможность выбора окна в режиме наложения (overlay);
  • Показ миниатюрной галереи на страницах сайта;
  • Просмотр галереи прокруткой колеса «мыши».
настройки-EasyFancyBox
Easy FancyBox настройки плагина
настройки-EasyFancyBox-лист2
Easy FancyBox настройки плагина

В завершении, нужно отметить, что в настройках Easy FancyBox плагин есть включение модальных окон для видео с YouTube, Dailymotion, Vimeo, документов PDF, SWF, SVG. Можно сделать iFrame для другого ресурса. Однако, эти опции только, в pro версии за 10$ для одного домена.

©www.wordpress-abc.ru

www.wordpress-abc.ru

В настоящее время активно эксплуатируется уязвимость в CMS WordPress плагине FancyBox for WordPress (https://wordpress.org/plugins/fancybox-for-wordpress/). Уязвимость позволяет хакеру внедрить вирус в код страниц без каких-либо доступов к хостингу и к админ-панели WordPress. Из-за большого числа загрузок и установок плагина (только официально их зарегистрировано более 550 000) и возможности простой и автоматической эксплуатации, заражение через FancyBox носит массовый характер. 

Много кто написал про уязвимость в плагине, но никто не написал, как удалить вредоносный код, внедренный через уязвимость в этом плагине.

Проверить, есть ли на странице вредонос, можно в течение нескольких секунд. Нужно открыть код страницы и посмотреть фрагмент, начинающийся с “.fancybox({”.

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

вирус на сайте через fancybox

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

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

вирус на сайте через fancybox

Открываем таблицу wp-options и ищем строку с опцией ”mfbfw”

вирус на сайте через fancybox

В поле option_value хранится серилизованный php массив настроек. В обычном состоянии будет выглядеть так:

После атаки остается небольшой обрубок серилизованного массива, поэтому значения в админ-панели будут или пустые, или скрыты.

вирус на сайте через fancybox

А также в админке исчезает кнопка “сохранения” и “сброса” настроек.

Поэтому в первую очередь нужно восстановить настройки по-умолчанию, чтобы плагин и его админ-панель заработали вновь. Для этого скопируйте код, приведенный ранее (он выделен зеленым), и вставьте его в поле option_value. Если вы все сделали правильно, в настройках FancyBox появятся корректные значения полей и кнопки сохранения/сброса настроек. Также с со страницы должен исчезнуть вредоносный код. Если у вас установлен кэширующий плагин (например, HyperCache, Total WP Cache), очистите кэш вручную.

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

Но если по какой-то причине вам это не удается сделать, то можно быстро пропатчить файл wp-content/plugins/fancybox-for-wordpress/fancybox.php, добавив в функцию mfbfw_admin_options() строку return;

вирус на сайте через fancybox

Если вам нужно будет внести изменения в настройки плагина fancybox-for-wordpress, удалите данную строку из файла, задайте новые настройки через админ-панель, а затем снова добавьте строку в указанный файл.

Еще раз обращаем внимание на то, что все плагины важно поддерживать в актуальном состоянии и не лениться их обновлять.

Если вы не можете самостоятельно удалить вредоносный код с сайта, вы всегда можете обратиться к специалистами.

revisium.com

Fancybox 1.3.4 вызов через CDN Яндекса

FancyBox является популярным скриптом, позволяющим открывать графические объекты в модальном окне поверх контента. Это упрощает навигацию по сайту, и позволяет пользователю масштабировать изображение для просмотра.
Для подключения мы воспользуемся файлами Яндекса, размещёнными на CDN сервере. Это, как минимум, оптимизирует загрузку страниц WordPress, и исключит копирование файлов на хостинг.

Для подключения внешнего скрипта открываем файл «header.php» вашей активной темы, где вставляем следующий код до закрывающегося тега «</head>»:

<?php if ( is_single() ) : ?> <link rel="stylesheet" href="//yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.css" />  <script src="//yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script>   <script type="text/javascript">$(document).ready(function(){$('a[href^="https://wd-x.ru/wp-content/uploads/"]:has(img)').fancybox({'titleFromAlt':true,'titlePosition':'outside','padding':'5','margin':'25'});});</script> <?php endif; ?>

Здесь мы ограничили вывод скрипта только на страницах «single.php». Подключили файлы стилей CSS и самого скрипта fancybox. А в конце указали путь до конечных файлов изображений «/wp-content/uploads/», чтобы на клик мышкой раскрывались только загруженные на сайт картинки.

Сохраняем файл «заголовка», и отправляемся проверять работу скрипта «FancyBox». Напомним, что в модальном окне откроются только изображения для которых в поле ссылка указан «Медиафайл» То есть, миниатюра в теле публикации должна ссылаться на свой оригинал.

Fancybox 3.0.47 вызов через cdnjs.cloudflare.com

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

Для вызова добавьте следующий код перед закрывающимся тегом «</head>»:

<?php if ( is_single() ) : ?> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>  <script type="text/javascript">$(document).ready(function(){$('a[href^="https://wd-x.ru/wp-content/uploads/"]:has(img)').fancybox({});});</script> <?php endif; ?> 

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

Сохраняем изменения в шаблоне нажатием кнопки «Обновить», и отправляемся проверять работу скрипта. Если у Вас установлено активное кэширование, то предварительно полностью очистите кеш.

Примечание! В ряде случаев, новый скрипт может не отрабатываться  должным образом. Для исправления можно поэкспериментировать с версией установленной библиотеки Jquery (для проверки запуска fancybox 3.0.47 мы применили jquery 3.2.1).

Где скачать оригинальные файлы FancyBox?

Если пожелаете разместить файлы скрипта у себя на сайте, и подгружать их со своего хостинг-сервера, то ниже предоставляем ссылки с сайта разработчика:

  • http://fancybox.net/api

Важно, в этом случае, не забудьте изменить адрес до файлов в «functions.php»!

Вместо послесловия

Надеюсь, Вы по достоинству оценили простоту, описанного варианта подключения “FancyBox”. Но, если же данный метод показался ограниченным, то рекомендуем установить плагин «FancyBox for WordPress”…

wd-x.ru

Как обнаружить Zero day in the Fancybox-for-WordPress?

Если на вашем сайте был установлен старый плагин Fancybox for WordPress нужно проверить его на наличие вируса, сделать это достаточно просто, открываем свой сайт и нажимаем в мазиле или гугл хроме CTRL+U у вас откроется исходный код вашего сайта. Если вы там увидите код такого плана как на картинке var _0xd2d0=[«ppkcookie»,»testcookie»,»match»,»userAgent»,»location»:

вирус zero day in the Fancybox for WordPressваш сайт 100% заражен.

Также зайдя в админку WordPress можно перейти во вкладку «Настройки» — «Fancybox for WP» если там не будет кнопки «Сохранить» и «Сбросить настройки», как на картинке ниже:

нет кнопки сохранить в Fancybox for WordPressу вас на сайте троянская програма, добавленная через уязвимость WordPress «Zero-day».

 

Если тревога ложная и исходный код сайта выглядит как картинка ниже:

уязвимость wordpress через плагин можете спать спокойно!, для профилактики достаточно обновить WP до последней версии, а также обновить Fancybox for WordPress plugin. На этом можете прекращать читать статью, ставьте лайк автору и спешите обновить свой сайт.

Если сайт на WordPress все атки заражен, вам придется дочитать статью до конца и немного повозится.

 

Как удалить вредоносный iframe добавлен через уязвимость Zero day in the Fancybox-for-WordPress

Как вы поняли, вредоносный троян записан вам в базу, а посему простого обновления плагина Fancybox — не достаточно.

  1. Обновляем Вордпресс и все плагины.
  2. Открываем базу данных через phpMyAdmin (который установлен у вашей панели управления хостингом) или же качаем админнер с официального сайта ( www.adminer.org ) заливаем в корень по фтп и запускаем через адресную строку ваш_сайт.ру/скачанный-файл.php вводим логин пароль к базе, можно посмотреть в настройках wp-config.php
  3. Зашли в базу данных, делаем на всякий случай полную копию (Дамп)
  4. Открываем таблицу wp_options ищем такую запись: «mfbfw» «var _0xd2d0=» (может быть несколько, удаляем все как на рис. 4)
  5. Заходим в админку сайта, смотрим настройки плагина, должна появится кнопка «Сохранить» и в исходном коде должна пропасть вредоносная строчка iFrame

 

как лечить или удалить вирус zero day в плагине Fancybox for WordPress

Рис. 4 (как лечить / удалить Zero day Fancybox for WordPress)

 

Ваш сайт вылечен. Если вредоносный код остался после обновления, значит вы удалили не все вредоносные куски кода. ищите еще, для удобства можно воспользоваться CTRL+F

 

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

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

 

Узнать сколько стоит сайт на wordpress можно у нас на сайте.

 

Если по какой либо причине у вас не получается удалить троянский код напишите мне о своей проблема через форму обратной связи и я попробую вам помочь. (Обязательно указывайте ссылку на сайт)

Если эта статья была вам полезна жмите лайк

Последнее время пользователи обращаются с советом какая альтернатива есть вот этому плагину, советую прочесть статью lightbox WordPress там описан альтернативный плагин для всплывающих изображений.

 

Дополнение (обновлено 14.03.2015)

Как удалить троянскую программу Troj/JSRedir-QG

Есть очень большое подозрение на то, что новая версия Fancybox for WordPress 3.0.6 тоже уязвима к троянской программе (могу ошибаться, если заказчик обновил плагин до меня, хотя божится что ничего не делал 🙂 ).

Яндекс вебмастер называет этот вирус — как Troj/JSRedir-QG. Удаляется эта троянская программа описанным выше способом, достаточно войти в базу и удалить 1 или 2 строчки кода в таблице wp_options.

Надеюсь дополнение к этому посту: как удалить трояна Troj/JSRedir-QG ?, было вам полезно. Жмите лайк, и следите за этой новостью. Разработчики Fancybox for WordPress пока отстают с патчами своих траблов.

 

Дополнение (обновлено 19.03.2015)

Вирус, который начинался совсем безобидно, теперь по настоящему может принести вред вашему ПК и вашим посетителям. Следует незамедлительно обновлять плагин Fancybox for WordPress с уязвимостью Zero day. Код троянской программы постоянно меняется, сейчас он выглядит вот так:

Стоит опасаться всех всплывающих окон у вас на сайте, которых вы не ставили, это единственный способ обезопасить себя и обнаружит вирус.

Удалить вирус записанный через Zero day Fancybox for WordPress можно по прежнему так, как я описывал выше. Если у вас это не получится сделать, обращайтесь, поможем. Возможно, ваш пример станет новой страницей в моем блоге 🙂

 

Дополнение (обновлено 06.04.2015)

Вирус Fancybox продолжает усовершенствоваться, теперь он умеет атаковать пользователей на android, а так же может выводить «дурацкие» сообщения на главных и внутренних страницах сайта. Как я понимаю разработчики вируса тестируют его прям на живых сайтах пользователей, что еще больше усугубляет ситуацию. Написанный ранее код для поиска вируса не действительный, нужно смотреть каждый сайт с этим плагином в отдельности. Обнаружить вирус может владелец сайта случайно или когда гугл начнет кричать «ваш сайт заражен».

Напоминаем, что для того чтоб вирус вас не зацепил нужно обновить плагин Fancybox до последней версии. Перед этим надо проверить, может вирус уже у вас на сайте. Для этого можно обратиться к нам, мы сделаем проверку на наличие вируса бесплатно, с гарантией результата 70% или платно с последующим удалением, гарантия 99%.

help-wp.ru

Возможности Easy Fancybox в WordPress

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

Fancybox for wordpress

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

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

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

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

Установка и настройка Easy Fancybox

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

Fancybox for wordpress

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

Fancybox for wordpress

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

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

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

Интересные дополнительные хаки

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

Отключаем скрипт на странице

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

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

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

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

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

wordpressinside.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector