Lightbox Plus

Lightbox Plus является одним из самых популярных плагинов, реализующих Lightbox-эффект появления картинки (при клике на уменьшенную копию картинки большая открывается в этом же окне с красивым js-эффектом). Популярность плагина обуславливается двумя вещами: первое – он начинает работать сразу после активации и не требует дополнительной настройки картинок, а второе это то, что настроек в плагине много и при желании настроить плагин можно под любые задачи. Плагин умеет красиво открывать не только картинки, но также и видео, флешки и внешние ссылки. Обычно я не люблю менять  работающий хорошо плагин на другой подобный, но тут не удержался и поменял старенький и морально устаревший Lightbox2 WordPress Plugin на Lightbox Plus.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку lightbox-plus в /wp-content/plugins/.

3. Заходим в админку блога на вкладку "Плагины" и активируем плагин.

Как я уже сказал – сразу после активации плагин начинает работать и все картинки у вас уже будут открываться с Lightbox-эффектом. Но настроить плагин все-таки придется, так как надо будет перевести надписи вроде "Image 1 of 2" на "Картинка 1 из 2". Я хотел было перевести сразу весь плагин на русский язык, но бросил это дело на половине, так как, к сожалению, автор плагина забил на поддержку мультиязычности и большую часть плагина нельзя перевести через файлы локализации. Это неприятно по причине того, что настроек в плагине действительно много и разобраться в них сразу человеку, который не владеет английским языком достаточно сложно. Но плюс плагина в том, что обычному пользователю практически ничего настраивать и не надо.

В любом случае, настроить плагин вы сможете зайдя во "Внешний вид\Lightbox Plus". Первое, что вы тут увидите это настройка стиля:

Плагин предлагает 14 встроенных стилей появления картинок. Это единственная настройка плагина, с которой стоит внимательно поиграться, чтобы стиль подходил к дизайну вашего сайта. Но будьте внимательны, так как по умолчанию все стили заточены под английский язык и после перевода слов "previous" и "next" на "предыдущая" и "следующая" эти слова в некоторых стилях могут наезжать друг на друга.

Это основная настройка плагина, а все остальные настройки находятся в разделе "Primary Lightbox Settings", который содержит подразделы:

Зайдите в подраздел "Base Settings", именно здесь надо переводить фразы:

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

Как пользоваться плагином? Да очень просто – вставьте, например, в запись миниатюру картинки и большая картинка при клике на эту миниатюру будет открываться в выбранном вами Lightbox-стиле. Никаких дополнительных действий от вас не требуется. Вот так это будет примерно выглядеть:

Правда, маленькая оговорка - по умолчанию все картинки будут выводиться в галерее (то есть с кнопками "предыдущая" и "следующая"). Если вы не хотите, чтобы картинки выводились в галерее, то вам надо прописать rel тег для ссылки вида rel="lightbox[uniqueID|filename]". То есть код ссылки должен быть:

<a href="http://www.wordpressplugins.ru/pics/lightbox-plus/1.jpg" rel="lightbox[eva1]">
<img style="display: inline" title="Ева Грин" border="0" src="http://www.wordpressplugins.ru/pics/lightbox-plus/1s.jpg" /></a>

Где "eva1" это уникальный идентификатор картинки (любое уникальное значение). Если этот идентификатор прописать сразу у двух картинок, то у вас получится галерея из двух картинок. Например, код:

<p>
<a href="http://www.wordpressplugins.ru/pics/lightbox-plus/2.jpg" rel="lightbox[eva2]">
<img style="display: inline" title="Ева Грин" border="0" alt="Ева Грин" align="middle" src="http://www.wordpressplugins.ru/pics/lightbox-plus/2s.jpg" /></a>
 
<a href="http://www.wordpressplugins.ru/pics/lightbox-plus/3.jpg" rel="lightbox[eva2]">
<img style="display: inline" title="Ева Грин" border="0" alt="Ева Грин" align="middle" src="http://www.wordpressplugins.ru/pics/lightbox-plus/3s.jpg" /></a>
</p>

Выведет вот такую галерею:

Редактировать rel тег можно прямо в редакторе WordPress:

Все достаточно просто с картинками. Но как вывести видео или другой контент с эффектом Lightbox? Для этого сначала зайдите в настройки плагина и поставьте галку на "Use Secondary Lightbox":

После клика на "Save settings" появятся дополнительные настройки именно для вставки видео и прочего контента:

Собственно, кликнув на указанные ссылки, вы увидите пример кода вставки нужного контента. Например, код:

<a class="lbpModal" title="Реклама с Евой Грин" href="http://www.youtube.com/v/w4iOWCXYQIs">Реклама с Евой Грин</a>

Выведет ссылку "Реклама с Евой Грин", при клике на которую откроется Lightbox-окно с видео. Только обратите внимание на формат ссылки - указывать видео надо именно в таком виде, прямая ссылка на видео не будет работать.

По сути добавление class="lbpModal" к любой ссылке заставляет плагин открывать ее в модальном окне. Ссылка может быть на внешний сайт, на флешку или на любой другой контент.

Что делать, если вы установили плагин, а Lightbox-эффекты не работают? Первым делом убедитесь, что на сервере у вас установлен PHP5 - с четвертой версией плагин не дружит. Затем убедитесь, что в файле вашего шаблона footer.php есть вызов функции wp_footer() - без этой функции плагин не сможет подключить скрипты и соответственно не сможет работать. Все еще не работает? Попробуйте отключить все остальные плагины в блоге - возможно, что какой-то из них неправильно вызывает или неправильно использует библиотеку JQuery. Пишите в комментариях о проблемах, попробую помочь.

На мой взгляд, Lightbox Plus на данный момент это лучший плагин, реализующий Lightbox-эффекты для сайта на WordPress.

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.