Flector

Lightbox Plus

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". Первое, что вы тут увидите это настройка стиля:

General Settings

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

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

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:

Редактирование rel тега

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

Use Secondary Lightbox

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

Настройки Secondary Lightbox

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

<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 в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Nashkvartal.kiev.ua

nashkvartal.kiev.ua

nashkvartal.kiev.ua

Комментарии (всего 189 комментариев)
Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.