Главная › Новости

Lightbox в Joomla

Опубликовано: 10.04.2018

Фикс ошибок модуля je lightbox на joomla 2.5

В данной статье речь пойдет о технике lightbox с использованием модальных окон в Joomla.

Думаю, вы не раз видели эффектно всплывающее окно с картинкой после клика по маленькой картинке-превьюшке. Эти всплывающие окна на затемненном фоне, заполняющие часть экрана, и являются модальными окнами. В Интернете модальные окна служат для показа картинок или веб-контента в деталях.

Widgetkit Урок 3 Lightbox. Красивое всплывающее окно на Joomla

Техника, используемая для отображения различного веб-контента с помощью модальных окон, получила названия  lightbox. Это название произошло от первого JavaScript плагина написанного Lokesh Dhakar. В апреле 2012 плагин был переписан для JQuery.

Как вы могли заметить, в административном разделе Joomla в категории медиафайлов изображения открываются в лайтбоксе. Значит в Joomla техника lightbox есть. Как же реализовать такой же эффект на сайте? Вы, конечно, для этих целей можете воспользоваться плагинами сторонних разработчиков (ImageSizer, JoomSlide и др.), однако, для решений простых задач можно воспользоваться и лайтбоксом в Joomla.

ImageSizer показ изображений в lightbox окне по умолчанию для Joomla! + галерея

 

Создание модальных окон в Joomla

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

Теперь нужно подготовить графические файлы. К оригинальным изображениям нужно создать превью, т.е. уменьшенные копии этих изображений. Обработать картинки можно с помощью фотошопа или любого другого графического редактора. Или для обработки изображений можно воспользоваться онлайн сервисами в Интернете.