Блог Сергея Арсентьева

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

Лучший плагин для всплывающих окон в WordPress

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

Только одна проблема: эти плагины довольно капризны и не каждый захочет "всплывать" на вашем сайте. Я перепробовал множество плагинов прежде чем нашел рабочий для себя.

WP Lightbox, Lightbox2, Fancybox, Jquery Lightbox и другие плагины - лично у меня НЕ работали.

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

Внимание! Я нашел еще более крутой плагин!

Я нашел еще более крутой и толковый плагин для всплывающих картинок и галерей - Responsive Lightbox от dFactory. Так что все остальное можно не читать, оставляю как историю :smile:

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

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

Можете качать из репозитория https://ru.wordpress.org/plugins/responsive-lightbox/

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

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

5 минут и все работает, удачи!

Для истории оставляю предыдущий текст:

Преимущества Lightbox Plus Colorbox.

По отзывам некоторых программистов в сети, этот плагин всплывающих окон один из самых быстрых в работе, так как использует наиболее современные скрипты JS. В принципе, открывается все довольно шустро, но с секундомером не стоял, скорость работы разных плагинов не сравнивал. Но в любом случае приятно осознавать, что у тебя стоит "самый шустрый плагин" :smile:

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

Установка и настройка Lightbox Plus Colorbox

Устанавливается как обычный плагин WordPress, после активации сразу сделайте следующие настройки:

Вкладка "General"

Resize Speed:500
Overlay Opacity:80%

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

Вкладка "Position"

Fixed: Да.

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

Вкладка "Position"

Overlay Close: Да (чтобы можно было закрыть простым кликом на любую часть экрана)
ESC Key Close: Да (чтобы можно было закрыть по клавише Esc)

Вкладка "Styles" (основные настройки)

Lightbox Plus Colorbox Style: Выбор стиля

Внешний вид всплывающей картинки. По умолчанию там полная ерунда стоит. Мне больше всего понравились: Overtext и Fancypants.
Впрочем вы можете выбрать что-то другое или вообще создать свой CSS-стиль.

А если все равно не работают всплывающие окна?

Как я уже говорил выше Lightbox Plus Colorbox единственный плагин, что у меня заработал во всех браузерах. Другие или вообще не работали, или не работали в конкретных браузерах (чаще всего почему-то в Firefox).

Но я не исключаю ситуацию, когда и этот плагин вдруг по каким-то причинам лично на вашем блоге не заработает. Связано это может быть с конфликтом JS и искать причину, поверьте, себе дороже - можно убить сутки и ничего не найти. Тут нужно быть специалистом по Java или нанять такого специалиста, но это вам вряд ли обойдется дешевле, чем 20-30$.

Поэтому простых и дешевых вариантов несколько:

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

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

3Ну и еще есть один момент, в котором нужно убедиться. Откройте файлы, которые находятся в вашей теме header.php и footer.php. Это можно сделать с помощью FTP доступа, вот инструкция.

В файле header.php перед закрывающим тегом </head> должна находиться примерно вот такая конструкция <?php wp_head(); ?>

Не показываются всплывающие картинки WordPress в header

В файле footer.php перед закрывающим тегом </body> должна находиться примерно вот такая конструкция <?php wp_footer(); ?>

Не показываются всплывающие картинки WordPress в footer

Если их там нет совсем - добавьте. Если они где-то далеко от закрывающих тегов - переместите ближе. В некоторых темах WordPress эти php-конструкции отсутствуют и скрипты работают некорректно.

Ну а если вы все сделали правильно, то у вас при добавлении очередного медиафайла (должен быть установлен параметр ссылка на картинку) автоматически будет добавляться эффект всплывающих картинок ко всем изображениям на страницах Вордпресс. Кликните на картинку для примера работы плагина всплывающих окон в WordPress, и посмотрите какие глаза у этой замечательной собачки :smile:

Прикольные глаза у собаки

Раньше плагин был в репозитории WordPress, но сейчас вроде уже его там нет. Но зато можно скачать напрямую с сайта разработчика https://www.23systems.net/wordpress-plugins/lightbox-plus-for-wordpress/

Устанавливается как обычный плагин WordPress

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

Скачать бесплатно

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

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

  • Попробуйте другую соцсеть или зайти из другого браузера
  • Оставьте страницу подождать какое-то время (в новой полной версии соцзамка есть таймер обратного отсчета, он в углу показывает оставшееся время до самооткрытия).
  • Заходите в спецархив - я тут выкладываю ссылки на все файлы (https://moytop.com/about-archive-moytop)
Автор блога
“Измени свои привычки, и изменится твоя жизнь..”
Специалист по созданию и продвижению сайтов (SEO и реклама), фрилансер с многолетним опытом.
Статистика блога
  • Всего материалов на сайте: 181
  • Активных комментариев: 2 540
  • Работает онлайн: 5.1 лет
  • Читателей за это время: 1 420 794

Было интересно - жми на звезды:



Комментарии на блоге
Комментариев | (6)
  • Сосновоборск

    А можно не скриншот а полностью что добавлять нужно?
    А то скриншот обрезает сверху, не видно всю строку!

    Комментировать
  • Юлия
    Юлия

    Не могли бы Вы ссылку дать на этот плагин, хотя бы адрес. WordPress.org плагин Lightbox Plus Colorbox не находит - нет его на официальном сайте сейчас. И Ваша статья без ссылки на плагин полностью теряет свою полезность.

    Комментировать
    • Сергей Арсентьев

      Выложил ссылку в статье, раньше он был в репозитории WordPress, так и не выкладывал ссылку на разработчика.

      Комментировать
  • Михаил
    Михаил

    Не работает ни один lightbox и fancybox. Точнее, на моем ПК не работает, если загружает другой человек на ту же страницу - все отлично :cry: :wall:

    Комментировать
    • Таисия
      Таисия

      У меня на одном сайте эти плагины работают, а на другом - нет. Не понимаю, почему... :facepalm:

      Комментировать
  • Роман
    Роман

    Этот плагин тоже не работает.

    Комментировать
Добавить свой комментарий
Подписка на бесплатные уроки
Подписаться!
Подробнее в Полезные программы, Полезные программы
Скачать Фотошоп бесплатно на русском
Фотошоп скачать бесплатно на русском

99% всех сайтов и работ по веб-дизайну делаются в Фотошопе. Ведь любой сайт - это растровая графика, а Photoshop -...

onepress-social-locker
OnePress Social Locker - лучший cоциальный замок для WordPress

Сейчас я расскажу как поставить на сайт так называемый "социальный замок" и увеличить активность своих пользователей в социальных сетях. Это...

Закрыть