Всплывающие картинки в WordPress c плагином Easy FancyBox

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

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

Содержание:

Меняем параметры картинки

Откроется окно Параметры изображения. Если в параметрах в разделе Настройки отображения в пункте Ссылки по умолчанию стоит значение Нет, то на сайте при нажатии на картинку ничего не произойдет.

Параметры изображения

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

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

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

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

Чтобы увеличенная картинка оставалась на странице, что поможет посетителям несомненно при знакомстве с материалом, потребуется установить плагин Easy FancyBox.

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

В админ панели сайта нажимаем Плагины — Добавить новый. В строке поиска вводим название — Easy FancyBox. Плагин сразу находится.

Easy FancyBox

Можно заметить, что Easy FancyBox имеет довольно большое количество установок и обновляется регулярно, нажимаем Установить. Затем активируем.

Настройки плагина — всплывающие картинки

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

Настройки дают возможность применять Easy FancyBox не только к изображениям, но и, например, к видео с YouTube и т.п.

Настройки находятся по пути — НастройкиНастройки медиафайлов. Здесь под обычными настройками медиафайлов есть раздел FancyBox:

Настройки

  1. Первый пункт – Media, это возможность включить плагин для определенных типов файлов. Выбираем какие нужно.
  2. Далее идет опция Overlay. Здесь можно выбрать, показывать, либо нет затемненный фон, который появляется при открытии изображения.
  3. Также можно определить, будет ли срабатывать плагин при клике вне изображения.
  4. Можно выставить прозрачность фона. Например, 09 — полностью непрозрачный, а 0 — полностью прозрачный фон. Можно задать цвет, например, серый.

Overlay

Затем идут настройки всплывающего окна – Window, которые позволяют:

Всплывающее окно

  • Отключить, либо включить кнопку закрытия окна, поз. 1 задать цвет для title, рамки картинки.
  • Задать размер окна, поз. 2. По умолчанию — 560×340 и рамка — 10 пикселей.
  • Задать, чтобы окно не центрировалось при прокручивании страницы.
  • Настроить, чтобы изображение уменьшилось, если слишком большое.

То есть при большом изображении может появиться полоса прокрутки и изображение не будет видно целиком.

  • Можно определить скорость открытия и закрытия окна. Например, открытие можно поставить 1000 мс, а закрытие — 500 мс.
  • Определить, для каких типов файлов плагин будет применяться автоматически.
  • Можно изменить тип анимации.
  • Включить, чтобы окно закрывалось при клике по всплывающей картинке.
  • Можно выбрать, будет ли показываться title, либо определить title с альтернативным значением, то есть с атрибутом alt картинки.
  • Отключить, либо отредактировать применение плагина в галерее. Галерею можно вообще отключить, чтобы плагин с ней не работал.

Просмотр галереи настраивается как одно изображение, либо каждая всплывающая картинка будет просматриваться отдельно:

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

Далее идет опция Ссылки. Здесь можно отключить Easy FancyBox для ссылок, которые не видны или которые не содержат картинку.

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

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

Оставшийся контент на странице при этом притеняется. На всплывающей картинке есть кнопка Закрыть в виде крестика, при нажатии на которую, картинка принимает свой первоначальный вид.

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

Дополнительные возможности плагина

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

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

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

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

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

Оставьте комментарий

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