Как сделать всплывающие картинки в WordPress

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

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

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

  • по умолчанию:
    Всплывающие картинки в WordPress
  • всплывающее окно:
    Всплывающие картинки в WordPress

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

Как сделать всплывающие картинки в WordPress?

Для реализации поставленной цели воспользуемся плагином WordPress под названием WP jQuery Lightbox.

Найти, установить и активировать его прямо из админ-панели WordPress не составит никакого труда:

Всплывающие картинки в WordPress

Всплывающие картинки в WordPress

Чтобы перейти к настройкам плагина, необходимо в админ-панели выбрать пункт меню НастройкиjQuery Lightbox:

Всплывающие картинки в WordPress

Появится окно настроек:

Всплывающие картинки в WordPress

Пробежимся по ним подробнее:

  • Использовать lightbox автоматически — если активировать данную функцию, то каждая картинка сайта, вставленная со ссылкой на файл изображения, будет открываться во всплывающем окне;
  • Enable lightbox in comments (disables the nofollow attribute!) — разрешить плагину открывать изображения по ссылкам из комментариев во всплывающих окнах;
  • Show title & caption — показывать заголовок и подпись к картинке во всплывающем окне;
  • Show download link — отображать во всплывающем окне ссылку на скачивание изображения;
  • Target for download link — параметры ссылки для скачивания изображения;
  • Show image info on top — после активации данной функции информация о картинке будет отображаться над картинкой, а не под ней, как в случае по умолчанию;
  • Подгонять размер изображения под экран — размер изображения будет подогнан под размер экрана;
  • Animation duration (in milliseconds) — время, в течение которого осуществляется переход от одного изображения к другому при ручном перелистывании (эффект замедления);
  • Slideshow speed (in milliseconds). 0 to disable. — время в миллисекундах, в течение которого показывается каждое изображение в рамках показа слайд-шоу. Чтобы запретить показ слайд-шоу, задайте в данном поле 0;
  • Help text (default: none) — можно прописать какое-либо текстовое пояснение, которое будет отображаться во всплывающем окне. По умолчанию данное пояснение отсутствует.

В разделе настроек How to Use: описано как создавать и использовать галереи изображений и слайд-шоу:

Всплывающие картинки в WordPress

В частности здесь объясняется как формируются галереи (автоматически и вручную), как разделить галерею на несколько отдельных слайд-шоу, как исключить изображение из галереи и так далее.

Раздел Troubleshooting в настройках плагина призван помочь решить возникшие в процессе использования плагина проблемы:

Всплывающие картинки в WordPress

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

Раздел Credits рассказывает о создателях плагина:

Всплывающие картинки в WordPress

Таким образом в данной статье мы рассмотрели плагин WP jQuery Lightbox и сделали с его помощью всплывающие картинки для своего сайта на WordPress.

Также стоит прочитать:

Как сделать красивую форму подписки Feedburner для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

Комментарии 21

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

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

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

Adblock detector