Lightbox в Joomla

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

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

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

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

 

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

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

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

Хотелось бы акцентировать ваше внимание на следующем. С превьюшками все ясно, они маленькие, следовательно, вес файлов невелик. Главное, обязательно обрабатывайте оригинальные изображения, добиваясь наименьшего веса файлов с сохранением качества. Иначе, из-за длительной загрузки больших файлов, вы рискуете потерять посетителя, которому наскучит дожидаться, пока картинка откроется и он покинет сайт. Размер оригинальных изображений не следует делать более 800 x 600 пикселей (учитывая величину экранов старых мониторов). Оригинальные картинки вы также можете обработать онлайн, однако, если есть возможность и умение, лучше сделать это самому.

И так, допустим, мы создали два файла разных размеров 120x90 и 800x600 пикселей – pic120.jpg и pic800.jpg и загрузили в соответствующие папки (или папку) на сайт.

Как уже упоминалось ранее, в Joomla существуют расширенные возможности для вывода веб-контента (фото, материала и др.) в отдельном окне - JHTML::_( 'behavior.modal' ). Поэтому, для того, чтобы на сайте заработал lightbox, достаточно вставить в файл index.php в между тегами <head> и </head> шаблона следующий код:

<?php JHTML::_('behavior.modal'); ?>

Теперь мы сможем выводить наш веб-контент в модальных окнах.

 

Модальное окно в Joomla для одной картинки

Для вывода фото в модальном окне мы обязательно указываем класс modal и ссылку на оригинальное изображение

<a class="modal" title="Чижик" href="/images/pic800.jpg"><img src="/images/pic120.jpg"></a>

 

Модальное окно в Joomla для контента

Для вывода в лайтбоксе материала мы также указываем класс modal, ссылку на нужную страницу и размер модального окна

<a  href="/..." class="modal" rel="{handler: 'iframe', size: {x: 620, y: 480}}">ссылка на lightbox 620x480px</a>

В конце ссылки вставляем ?tmpl=component. Пример ссылки на данную страницу: href="/lightbox-v-joomla.html?tmpl=component". Вставляем ссылку в код и получаем: ссылка на lightbox 620x480px

 

И так, обобщу вышеизложенное. Для модального поведения объекта (картинки, материала, видео), основное, что нужно сделать, это добавить в <head > шаблона код:

<?php JHTML::_('behavior.modal'); ?> 

Затем к ссылке, которые вы хотите открыть в модальном окне, добавить код:

class="modal" 

Комментарии   

 
0 #10 Alex 06.02.2017 12:37
Спасибо, то что нужно! Если есть инструмент, то лучше его использовать
 
 
+1 #9 Саня 16.03.2016 17:33
Благодарю за информацию! Понятно и эффективно!
 
 
0 #8 Алексей 12.11.2015 10:42
Добрый день. У меня не отображается, например, слайдшоу в модальном окне. только текст, почему-то. Очень надо чтобы отображалось еще и слайдшоу, которое тоже есть на этой странице, которую открываем в модальном окне. Не знаете, в чем проблема?
 
 
0 #7 FeaMor 25.09.2015 08:23
Когда я вставляю , у меня модальные окна в virtuemart перестают работать.
Как сделать свои модальные окна, не разрушая существующие?
 
 
0 #6 FeaMor 25.09.2015 08:21
Цитирую Роман:
?tmpl=component не помогает в ссылке типа:

href="' . JRoute::_ ('index.php?option=com_virtuemart&view=user&task=' . $task . '&new=1&addrtype=ST&virtuemart_user_id[]=' . $userModel->getId (), $useXHTTML, $useSSL) . '?tmpl=component"

раз у тебя в ссылке уже есть знак вопроса, то второй знак вопроса меняй на &, то есть не "?tmpl=componen t", а "&tmpl=componen t"
 
 
+1 #5 Роман 14.09.2015 15:25
?tmpl=component не помогает в ссылке типа:

href="' . JRoute::_ ('index.php?opt ion=com_virtuem art&view=user&t ask=' . $task . '&new=1&addrtyp e=ST&virtuemart _user_id[]=' . $userModel->get Id (), $useXHTTML, $useSSL) . '?tmpl=componen t"
 
 
0 #4 iluha 07.07.2015 12:32
спасибо друг, JHTML::_('behav ior.modal') - то что надо.
 
 
+2 #3 lipsait 21.03.2015 15:08
behavior.modal вещь хорошая, но как к этому классу прикрутить лупу при наведении мыши на картинку, что бы было понятно, что картинка кликабельная.
 
 
+2 #2 admin 12.02.2015 10:20
Ильнар, добавьте в конце ссылки ?tmpl=component .
 
 
0 #1 Ильнар 11.02.2015 12:21
Здравствуйте.
Сделал все так для вывода контента. Но В модальном окне подгружается весь сайт, а мне нужна только контентная часть. В моем случае - это страница с фотогалереей. Как сделать, чтобы в модальном окне были только фотографии, и не весь сайт целиком?
 

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.