5 плагинов WordPress для создания Lightbox эффекта

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

Довольно часто для этих целей используют так называемый эффект Lightbox – затемнение основной фоновой области страницы при открытии изображения. Основные преимущества использования Lightbox – эстетическая красота и концентрация внимания пользователей на просматриваемой в текущий момент картинке. Реализовать эффект Lightbox на WordPress можно посредством нескольких плагинов. Ниже мы рассмотрим их.

Visual Lightbox

По сути, это отдельная программа, при помощи которой можно установить соответствующий плагин на нужную вам платформу (Joomla или WordPress). Сам плагин бесплатный, простой в плане установки и настроек. Добавление изображений на страницы происходит по стандартной схеме – в админке вы создаете несколько галерей, копируете шорткод с идентификатором нужной галереи и вставляете его в нужную статью (в режиме редактирования HTML). При просмотре изображения на нем будут отображаться кнопки навигации (вперед и назад), а также кнопка закрытия (крестик).

CSS Modal

Отличительная особенность данного плагина – работа практически на чистом CSS с минимальными включениями JavaScript. Это позволяет ему работать даже при выключенных в браузере пользователя скриптах (но не всегда). Кроме того, CSS Modal сделан с учетом принципов адаптивности веб-дизайна (Lightbox-эффект одинаково хорошо работает на многих по типу устройствах). Вместо изображений плагин может работать со другими элементами – видеороликами, информационными блоками, формами (регистрации, авторизации и т.д.).

Magnific Popup

Простой, бесплатный, но при этом очень красивый и качественно сделанный плагин. Работает с использованием JQuery. Как и предыдущий плагин, может отображать одиночные картинки, галереи из нескольких картинок и видеоролики с различных сервисов (YouTube, Vimeo и т.д.). При просмотре изображений доступны элементы навигации («вперед», «назад», «закрыть»), title картинки, информация об общем количестве картинок в текущей галерее.

FancyBox

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

iLightBox

Довольно функциональный и интересный плагин, функционирующий на JQuery. Из возможностей стоит отметить наличие 6 бесплатных скинов, адаптивную верстку, поддержку Touch-навигации, поддержку отображения видеороликов с YouTube и Vimeo, поддержку HTML5, кроссбраузерность и т.д. При просмотре галереи отображается не только текущая картинка, но и миниатюры других изображений, что значительно упрощает навигацию.