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"
Комментарии
Как сделать свои модальные окна, не разрушая существующие?
раз у тебя в ссылке уже есть знак вопроса, то второй знак вопроса меняй на &, то есть не "?tmpl=componen t", а "&tmpl;=componen t"
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"
Сделал все так для вывода контента. Но В модальном окне подгружается весь сайт, а мне нужна только контентная часть. В моем случае - это страница с фотогалереей. Как сделать, чтобы в модальном окне были только фотографии, и не весь сайт целиком?
RSS лента комментариев этой записи