Lightbox Plus
06.09.2018
Flector 5Lightbox Plus является одним из самых популярных плагинов, реализующих Lightbox-эффект появления картинки (при клике на уменьшенную копию картинки большая открывается в этом же окне с красивым js-эффектом). Популярность плагина обуславливается двумя вещами: первое – он начинает работать сразу после активации и не требует дополнительной настройки картинок, а второе это то, что настроек в плагине много и при желании настроить плагин можно под любые задачи. Плагин умеет красиво открывать не только картинки, но также и видео, флешки и внешние ссылки. Обычно я не люблю менять работающий хорошо плагин на другой подобный, но тут не удержался и поменял старенький и морально устаревший Lightbox2 WordPress Plugin на Lightbox Plus .
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1. Распаковываем архив.
2. Копируем папку lightbox-plus в /wp-content/plugins/ .
3. Заходим в админку блога на вкладку " Плагины " и активируем плагин.
Как я уже сказал – сразу после активации плагин начинает работать и все картинки у вас уже будут открываться с Lightbox-эффектом. Но настроить плагин все-таки придется, так как надо будет перевести надписи вроде "Image 1 of 2" на "Картинка 1 из 2". Я хотел было перевести сразу весь плагин на русский язык, но бросил это дело на половине, так как, к сожалению, автор плагина забил на поддержку мультиязычности и большую часть плагина нельзя перевести через файлы локализации. Это неприятно по причине того, что настроек в плагине действительно много и разобраться в них сразу человеку, который не владеет английским языком достаточно сложно. Но плюс плагина в том, что обычному пользователю практически ничего настраивать и не надо.
Wordpress Pt 7 - Lightbox Plus Colorbox (plug-in)
В любом случае, настроить плагин вы сможете зайдя во " Внешний вид\Lightbox Plus ". Первое, что вы тут увидите это настройка стиля:
Плагин предлагает 14 встроенных стилей появления картинок. Это единственная настройка плагина, с которой стоит внимательно поиграться, чтобы стиль подходил к дизайну вашего сайта. Но будьте внимательны, так как по умолчанию все стили заточены под английский язык и после перевода слов "previous" и "next" на "предыдущая" и "следующая" эти слова в некоторых стилях могут наезжать друг на друга.
Установка и настройка плагина Lightbox Plus ColorBox
Это основная настройка плагина, а все остальные настройки находятся в разделе "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> |
<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> |
<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> |
<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 в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную .