Сегодня я расскажу вам, как создать кликабельные картинки в Joomla, при клики на которые картинка увеличивается в модальном окне. Многие задумываются о том, как сделать так, чтобы при нажатии на картинку в Joomla она увеличивалась. На самом деле, такой функционал из Joomla присутствует изначально, его нужно лишь активировать. При добавлении картинки в материал Joomla нужно обернуть картинку ссылкой с классом modal, а в шаблоне добавить вызов функции modal из cms.html.behavior.
Рассмотрим это добро на примере:
- Открываем index.php нашего шаблона или, если у вас шаблон разбит на части, файл, где содержится информация до header, и добавляем туда сроку
JHtml::_('behavior.modal');, обычно такого рода вызов добавляется до объявления доктайпа (<!DOCTYPE html>) в шаблоне. - В админке сайта добавляем обычную картинку в материал, а для того, чтобы картинка открывалась при нажатии на нее, оборачиваем ее ссылкой с классом modal и адресом вашей картинки. Например, так:
<a class="modal" href="/images/image.jpg"><img src="/images/image.jpg"/></a>
Вот и все, теперь в вашей статье при нажатии мышкой на картинку она будет открываться во всплывающем окошке. Проверено на Joomla 3.x.
Результат:
Если ваша картинка большого размера, а экран имеет меньшее разрешение, то картинка будет сжиматься, искажая тем самым пропорции. Для устранения этой проблемы нужно изменить в файле /media/system/css/modal.css строки:
.sbox-content-image img {
display: block;
width: 100%;
height: 100%;
} На
.sbox-content-image img {
display: block;
max-width: 100%;
max-height: 100%;
}
Комментарии
Может кому нить еще пригодится)
Спасибо.
Не думал что так всё просто.
На Joomla 2.5 тоже работает.
RSS лента комментариев этой записи