WordPress pop-up картинка по клику иначе Lightbox.

WordPress pop-up картинка по клику иначе Lightbox.

О чем вообще речь. В тексте статей в WordPress зачастую присутствуют картинки, понятно дело. Из корбки WordPress их просто показывает без возможности кликнуть по ним. Такую картину я наблюдаю на множестве блогов. Не знаю как вам, а мне хочется иметь возможность кликнуть по картинке и увидеть ее увеличенную версию, не переходя на страницу картинки. Всплывающее по клику окно с картинкой и есть поп-ап окно или lightbox. Ну без него же неудобно, согласитесь, или я уже подслеповат стал.

Не используя  lightbox  вы расстраиваете Ченга
Не используя lightbox вы расстраиваете Ченга

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

И так, определились с желаниями, понятно дело нам нужен плагин, мы же в WordPress, тут для всего есть плагин, в десяти вариациях.

Выбор и установка

Понятно дело идем в плагины-установить новфый — ищем по запросу «lightbox».

Я опробовал эту троицу.
Я опробовал эту троицу.

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

  1. Simple Lightbox сначала показался отличным вариантом. Действительно простой, минимум функционала (скрин настроек ниже). Но в сравнении оказался жутким тормозом, открытие картинок очень медленное. Плюс нет настроек на тему как закрывать окно.
  2. Responsive Lightbox & Gallery не зашел вообще, показался слишком наворочен и перегружен функционалом.
  3. Easy FancyBox вообще пальцем в небо тыкнул. А на деле оказался идеальным решением, собственно сейчас на 2019 год он и стоит. Дальше речь пойдет о нем.
Настройки Simple Lightbox, может вам он подойдет.
Настройки Simple Lightbox, может вам он подойдет.

Easy FancyBox

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

Первый блок настроек.
Первый блок настроек.

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

  • Media — задаем какие типы данных показывать в всплывающем окне. Поставили галку на имадж и плагин уже работает.
  • Наложение — тут настраивается затемнение когда lightbox открыт. По мне важный пункт — Close FancyBox when overlay is clicked — значит закрывать pop-up когда мы кликаем мышью по заднему фону.
  • Окно. Apperance — настройки крестика закрытия и подписи. Dimensions — настройки размеров, особо не настраивал, вроде и так все работает. Поведение  — следовать ли lightbox за вами при прокрутке. Закрывать его по Esc. Что делать с «высокими» картинками, проверить не довелось. И архиважная кнопочка, включена по умолчанию. Не заметил ее и долго тупил. Листает картинки колесом мыши, адово неудобно. О каком листании речь поговорим позже.

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

Последний блок  Images

Последний блок Images

Тут много чего за деньги. Рассмотрим только подчеркнутое.
Close FancyBox when content is clicked — подобно тому что было выше, но закрывает lightbox по клику на картинке. Appearance — про то где брать подпись к картинке. Я пишу ее в alt у картинки. Gallery — показ картинок как галереи. То о чем я говорил выше, про прокрутку колесом мыши. Можно сделать показ картинок слайдами. У меня на скрине включено использовать только галереи WordPress. Наверно стоит переключить. Другой режим делает все картинки из статьи как галерею. Или вообще выключается. Ниже настройки стрелочек в поп-ап окне и возможность листать с клавиатуры.

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

Не забываем выставить.
Не забываем выставить. Для примера тут я не настроил ссылку.

Поделиться ссылкой:

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