Начало > Помощен център > Апликации > WordPress > Как да добавим Lightbox в WordPress?

Как да добавим Lightbox в WordPress?

Помощен център

Как да добавим Lightbox в WordPress?

Какво е lightbox?

Функционалността lightbox в уеб дизайна се отнася до създаване (с помощта на CSS и JavaScript или jQuery) на изскачащ прозорец в нов слой над текущата уеб страница, в който се зарежда изображение, видео, формуляр или друг дизайн елемент.

Обикновено lightbox затъмнява и деактивира елементите от уеб страницата и по този начин фокусира вниманието на посетителите върху собствените елементи (главно изображения).

Инсталиране и достъп до Simple Lightbox

В статията ще ви представим плъгина Simple Lightbox, който добавя тази много полезна функционалност към изображенията в WordPress.

lightbox решава лесно фундаменталния спор между дизайнери и програмисти относно качеството на изображенията и бързината на сайта, като осигурява достъп на потребителите до максималния размер на изображенията в подходяща среда, което позволява в публикациите да се зареждат копия с намалени размери за да не се компрометира бързата работа на сайта.

За да инсталирате Simple Lightbox следвайте познатите стъпки за добавяне на плъгини в WordPress - изберете в менюто Plugins > Add New, въведете в полето за търсене lightbox и инсталирайте/активирайте плъгина през бутона Install Now:

Инсталиране на Simple Lightbox в WordPress

Може да достъпите панелът с настройки Lightbox Settings като изберете от главното меню Appearance > Lightbox:

Достъп до Simple Lightbox от главното меню

или като кликнете линка Settings под името на плъгина в списъка с инсталираните в WordPress плъгини:

Достъп до Simple Lightbox през панела Plugins

Настройки в панела Lightbox Settings

В панелa Lightbox Settings настройките са разделени на няколко секции. Може да промените местата на секциите по следния начин - натиснете лентата с името на секцията за да се свие съдържанието, плъзнете лентата на новото място или използвайте бутоните стрелки за да преместите лентата нагоре или надолу.

Промяна местата на секциите в Lightbox Settings

Activation

Настройки в панел Activation

Първата настройка Enable Lightbox Functionality активира или изключва цялата Lightbox функционалност, затова полето трябва да бъде маркирано. Следващите настройки определят за кои части от сайта да бъде активиран Lightbox - за началната страница, за всички други страници, за отделни публикации, за архивни страници, за widgets и менюта.

Добра идея е да ползвате Lightbox само за отделни публикации (Enable on Single Posts), тъй като особено в дълги статии изображенията са далеч едно от друго и Lightbox ще помогне на читателите да ги разгледат в оригиналния размер и в компактна среда без да се налага да скролират из страницата.

Grouping

Настройки в панел Grouping

Отново първата настройка в секцията (Group items (for displaying as a slideshow)) активира функционалността групиране като цяло.

При активирано групиране Simple Lightbox може да показва като отделно слайдшоу изображенията от една статия (Group items by Post), ако имате няколко публикации на страницата.

Ако имате няколко галерии на една страница, чрез опцията (Group gallery items separately) ще показва всяка галерия като отделно слайдшоу.

UI (user interface)

Настройки в панел UI

Настройките в секция UI (потребителски интерфейс) определят как да изглежда Simple Lightbox. Плъгинът предлага само две теми (light and dark, светла и тъмна), които може да превключвате през менюто Theme.

Добра практика е да изключите опцията за автоматично стартиране на слайдшоу (Start Slideshow Automatically). Ако посетителят желае да активира режим слайдшоу може да го направи през бутоните Play/Pause в горния десен ъгъл на интерфейса.

В полето Slide Duration определяте през колко секунди да се сменят изображенията, настройката Overlay Opacity определя затъмняването на фона.

Labels

Настройки в панел Labels

Simple Lightbox включва етикети (labels) за всички бутони в lightbox. Тези етикети не се виждат на сайта, а служат като функция за достъпност (accessibility) и се използват от посетители, които използват екранни четци и помощни (assistive) технологии. Етикетите по подразбиране са напълно приемливи, но може да ги персонализирате в съответните полето на секция Labels.

Запазете направените промени като натиснете бутона Save Changes.

За да работи коректно Simple Lightbox остава една много важна стъпка - свързването на всяко изображение, което желаете да се зарежда в Lightbox с линк към медийния файл или към Attachment страницата, както е показано на изображението.

Просто кликнете в редактора Gutenberg върху изображението, в хоризонталното меню изберете иконата за връзка и в менюто изберете една от двете опции - Media File или Attachment Page (няма разлика коя от двете връзки ще посочите).

Свързване на изображенията към Media File или Attachment Page

Ако към публикацията сте добавили галерия и желаете тя да се зарежда в Lightbox, трябва да активирате опцията групиране и в помощната лента да изберете опцията Media File в менюто Link to. В полето Image Size изберете най-големите изображения (Full size или Large) за да може читателя да забележи всички детайли в изображенията.

Свързване на изображения в галерия към Media File

В секция Gallery settings (Columns) може да промените изгледа на изображенията в галерията в зависимост от броя на колоните.

Изглед на изображение в Simple Lightbox

На следващото изображение виждате Simple Lightbox в действие:

  • активирана е светла (light) тема;
  • активирано е групиране с изключено автоматично зареждане на слайдшоу;
  • бутони за стартиране на слайдшоу и затваряне на Lightbox в горния десен ъгъл;
  • бутони за ръчно зареждане на предишно/следващо изображение;
  • заглавие на изображението и общ брой на изображенията в групата (галерията) в долния ляв ъгъл;

Изглед на изображение в Simple Lightbox

Ако изображенията са различни по размер и не сте изключили опцията за анимация в секция UI > Enable animations, при смяна на изображението размерите на текущото изображение плавно ще се променят до размерите на следващото изображение.