Настройка easy fancybox

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

Плагин называется — Easy Fancybox, он очень легко устанавливается и первоначально не требует никаких настроек, работает сразу же после активации. После того, как вы активируете плагин, все ссылки на JPG, GIF и PNG изображения, автоматически открываются в отдельном окне.

Fancybox поддерживает:

  • WordPress галереи
  • PDF файлы
  • Изображения JPG, GIF, PNG и др., а также изображения карт
  • Ролики с сайтов, таких как YouTube,  Vimeo и Dailmotion
  • Фреймы (предназначенный для разделения окна браузера на части, в каждой из которых показывается информация с различных источников.)

Для получения еще больше количества дополнительных опций, можно поставить PRO расширение.

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

фывф

Собственно приступим к самому процессу установки.

Первым делом мы скачиваем нужный нам плагин. Скачать его можно с сайта wordpress.org , или же установить плагин с помощью стандартной базы плагинов WordPress. Я выбрал второй способ (с помощью стандартной базы плагинов),  он наиболее быстрый и простой, поэтому распишу этот пример. Для того, чтобы установить плагин этим методом, его не нужно будет скачивать на ПК. Все, что потребуется – зайти в раздел «Плагины», после чего нажать «Добавить новый».

 фывапро

Открывается страница, где нужно ввести как можно более полное название плагина и нажать «поиск». Вводим полное название плагина «Easy FancyBox» и нажимаем «поиск». После этого открывается страница с кучей плагинов по запросу, находим нужный и нажимаем «Установить». После успешной установки, Активируем его. Активировать можно сразу же после установки, или же потом, в списке всех установленных плагинов. Все, плагин теперь установлен и готов к работе.

ыфы

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

вы

Плагин установлен и работает. Теперь я совсем немного расскажу о его настройке.

Заходим на главную страницу работы с сайтом, нажимаем пункт “Плагины”, ищем там нужный с названием Easy FancyBox и нажимаем «параметры». Выводится окно с параметрами, которые можно изменить.

Параметр Overlay задает задний фон при открытии изображения, можно менять цвет и прозрачность. К примеру, черный цвет (#000000 – вписываем в пункт «Color»), а прозрачность меняем от 0 до 1 в пункте «Opacity», соответственно, чем значение больше, тем менее прозрачный становится фон, при установке значения 1, фон абсолютно непрозрачен.

Параметр Window, здесь мы видоизменяем само окно, в котором открывается изображения. Background color – цвет фона

Opacity – прозрачность

Border – рамка.

Также можно изменить ширину, высоту и саму рамку, по умолчанию же стоят значения 560х340х10 (порядок соблюден).

Behavior – так сказать поведение. Здесь я бы не советовал что-либо менять, кроме скорости открытия и закрытия окна (Opening speed и Closing speed), по умолчанию уставнолено значение 300.

Параметр Image. Autodetect  – перечислены форматы изображений, которые будут работать с плагином, можно добавить свои.

Пункт Behavior я не советовал бы изменять, настроено все как можно лучше.

Show tittle – это подпись изображения, можно убрать или же оставить.

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

До скорых встреч, успехов! Эдуард Тихонов

Похожие материалы:

brainteam.ru

Варианты встраивания ссылки с формой:

1. Встраиваем напрямую в шаблон:

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

2. Встраиваем в страницу или в запись

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

3. Встраиваем в виджет сайдбара

*нужно активировать поддержку шорткодов в фале functions.php (не все шаблоны поддерживают шорткоды в виджетах сайдбаров). Для этого в файл functions.php добавляем строку:
add_filter('widget_text', 'do_shortcode');
Теперь любой шорткод будет работать в виджете «Текст».
В виджет «Текст» вставляем код*:

<a class="fancybox" href="#contact_form_pop">Обратная связь</a>

 

4. Вызов формы обратной связи при нажатие на картинку:

Пример такой формы можете увидеть на сайте нашего заказчика: натяжные потолки в Киев
</code>

<a class="fancybox-inline" href="#contact_form_pop">
<img src="http://potolok-art.com.ua/wp-content/uploads/2013/02/button.png" alt="" border="none" /></a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">[contact-form-7 404 "Not Found"]</div>
</div>
5. Чтобы вызывать на одной странице несколько форм, нужно использовать различные <strong>id</strong> для вызова формы.
Пример вызова двух форм обратной связи в pop-up окне:

<code><a class="fancybox" href="#contact_form_pop_1">Вызываем форму 1</a>

Вызываем форму 2

 

В данном случае для вызова нескольких форм обратите внимание на эти части кода:

и для второй формы:

и так далее.

6. Вывод формы подписки Feedburner

<a class="fancybox subscribe" href="#contact_form_pop">ПОДПИСАТЬСЯ</a>

 

Можно использовать этот код для своей формы подписки изменив только адрес ленты https://feedburner.google.com/fb/a/mailverify?uri=Cms-info на свой.

Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Добавляем такой код, если используется плагин с fancybox например Easy Fancybox:
on_sent_ok: $.fancybox.close();
в блок Дополнительные настройки вашей формы.
Как сделать, чтобы окно с формой (fancybox) обратной связи закрывалось после успешной отправки

Если выдает ошибку: The requested content cannot be loaded. Please try again later

Такая ошибка может быть на последних версиях движка вордпресса рекомендуется сменить класc в ссылке:
<a class="fancybox" href="#contact_form_pop">Обратная связь</a>
меняем на:
<a class="fancybox-inline" href="#contact_form_pop">Обратная связь</a>

Мы сменили fancybox на fancybox-inline.

Проблемы и решения какие встречаются:

1. При нажатии на ссылку с формой ничего не происходило — в адресной строке появлялось http://сайт/#contact_form_pop.
Проблема решилась заменой плагина Easy FancyBox на FancyBox for WordPress

2. Если у вас подключена галерея(к примеру NextGEN Gallery) или установлена тема, которые уже имеют эффект «лайтбокса», получается следующее: фотографии открываются встроенным лайтбоксом и ещё лайтбоксом от EasyFancy Box, то есть приходится их потом два раза закрывать.
Чтобы избежать этого, в настройках EasyFancy Box отключите галочку Images и в верхней части кода всплывающей формы замените класс fancybox на fancybox-inline. Ваш код будет выглядеть так:.

<a class="fancybox-inline" href="#contact_form_pop">Обратная связь</a>

 

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

it-media.kiev.ua

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

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

Настройка easy fancybox

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

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

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

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

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

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

Настройка easy fancybox

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

Настройка easy fancybox

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

  • 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

Вступление

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

Часто бывает нужно сделать эффектную всплывающую контактную форму, это может быть заявка, или излюбленная шняга в шапке сайта «Заказать обратный звонок»
Это можно сделать всего с помощью двух плагинов,
Easy FancyBoxи Contact Form

Ищется и устанавливается все как обычно из официального репозитория WordPress  — секретов нету.
Перейдем к настройка,
Первым мы будем настраивать плагин Easy FancyBox
переходим Настройки — Медиафайлы и ставим галочку в Inline content (Советую убрать галку в Images, так как большенство тем уже имею свои всплывающие окна и свои стили, и дабы избежать конфликта убираем)
Настройка easy fancybox» data-lazy-original=»http://wpwh.ru/wp-content/uploads/2015/04/fansybox-300×171.jpg» alt=»fansybox» width=»300″ height=»171″ />

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

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

Если не посредственно в код шаблона то используем вот в этот код

При вставке у нас будет  просто ссылка вида Оставить заявку

чтобы придать красивости кнопки, можно дописать стили .button1 Этот код как пример вы вправе написать свой стиль, его следует скопировать и вставить в файл style.css вашей темы

 

Полный код будет выглядит так

Пример как это все работает можно посмотреть на сайте http://antiseptik.tv/ В шапке зеленая кнопка.

Для тех у кого выдаётся ошибка «The requested content cannot be loaded. Please try again later» (это случается на последних версиях движка вордпресса) рекомендуется сменить класc в ссылке:

меняем на:

 

wpwh.ru

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

Установка стандартна, а сам плагин можно скачать из репозитория бесплатных плагинов WordPress. Ну или установить прямо из админки как я описывал в этой статье. После установки и активации плагин будет работать без всяких дополнительных настроек, что называется «из коробки». Всем любителям «поковырять и понастраивать» следует отправится в свой раздел Параметры — Медиафайлы. Именно там Easy FancyBox создает свои дополнительные настройки. Все они разбиты на несколько основных разделов:

Media — список всех поддерживаемых форматов и типов файлов. По умолчанию включены только картинки, но вы можете подключить PDF, YouTube, Vimeo, iFrames и другие.

Overlay — настройки фона страницы при выводе картинки. Можно убрать вовсе или задать собственный цвет и прозрачность. Отключить закрывание картинки при клике по фону.

Window — все, что касается параметров самого окна с картинкой. Цвет, размеры, прозрачность, рамка и т. д.

Images — задайте все необходимые вам расширения форматов изображений. В подразделе Behavior настройте анимацию вывода. Настройте отображение курсора мыши при наведении на картинку. Определите нужно ли выводить заголовок и поддерживать стандартные галереи WordPress? Если вы используете какие то сторонние галереи, то лучше поддержку отключить во избежании дублирования вывода изображений.

Easy FancyBox

Если кроме картинок в первом разделе вы укажите например еще какие то типы файлов, соответственно в настройках появятся дополнительные настройки именно для них. Например, для видео с YouTube можно указать размеры окна.

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

wpnice.ru

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

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

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

Плагин FancyBox For WordPress

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

FancyBox for WP

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

Настройка easy fancybox

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

Привет друзья! Сегодня поговорим о том, как создать шикарную фотогалерею с помощью плагина Easy FancyBox для WordPress, который красиво оформит фотографии, видео и прочие медиа файлы за считанные минуты.

Из этой статьи Вы узнаете — как установить плагин Easy FancyBox, правильно его настроить на сайте под управлением Вордпресс, а так же узнайте о других интересных решениях в другой статье — Фотогалерея на wordpress — что может быть проще?!

Кстати, извините что долго не писал, времени на блог совсем не было! Сдал допуск на работе, я его называю — один день позора в году :razz: Теперь можно расслабиться и работать дальше!

У моей новорожденной дочки Яны чет животик постоянно болит. Вот мучаемся с женой, всю ночь — качаем, укачиваем, а к утру спать ложимся :???: Это колики, говорят желудок привыкает — побыстрее бы уже нормализовался! Ну ничего переживем и это…

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

Более подробно о своих новостях я напишу в отдельной статье, так же ждите нового конкурса с классными призами! Подпишитесь на мой блог, чтобы всегда быть в курсе. А теперь вернемся к теме создания галереи…

Установка плагина Easy FancyBox для WordPress

Устанавливается фотогалерея стандартно, через административную панель. Заходим в раздел «Плагины» и жмём «Добавить новый».fancybox-for-wordpress-001Копируем в строку поиска название плагинов и нажимаем «найти». Выбираем из списка наш плагин и нажимаем «Установить».

Рекомендую установить еще FancyBox for WordPress и выбрать наиболее подходящий! Допустим мне по душе Easy FancyBox у него и положительных отзывов намного больше. А так На вкус и цвет как говорится :razz:

Вы можете сразу перейти на свой сайт и посмотреть, как работает плагин. Здорово правда?! Теперь все фотографии имеют шикарное оформление. Что очень радует!

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

В принципе по умолчанию уже все настроено, но можно немного подшаманить и настроить плагин на свой вкус. Идем сюда:fancybox-for-wordpress-002И переходим в тонкие настройки Easy FancyBox:fancybox-for-wordpress-004Здесь можно выбрать для каких типов файлов включить поддержку плагина, визуально оформить модальные окна, а так же другие технические моменты.

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

Как создать фотогалерею Easy FancyBox для WordPress

Теперь давайте разберемся, как создать фотогалерею с помощью данного плагина. Для этого заходим в редактирование записи и нажимаем «Добавить медиафайл».

Открываем библиотеку файлов и нажимаем на клавишу «Создать галерею.fancybox-for-wordpress-003Далее из библиотеки файлов выбираем картинки, которые хотим видеть в галерее. Кликаем на изображение — возле него появится галочка. При необходимости вы можете загрузить другие картинки. Внизу страницы можно будет увидеть общее количество выбранных файлов.

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

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

Вот и все! Мы только что установили фотогалерею Easy FancyBox для WordPress и теперь у нас должно быть все красиво. Мне вот интересно, может Вы используете другие аналогичные плагины? Поделитесь опытом!

Будут вопросы пишите в комментариях! Рад что Вы читаете мой блог — Респект Вам и уважуха ;)

savme.ru

You May Also Like

About the Author: admind

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

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

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