Хотел бы отметить, что сегодня для джумла увеличение картинки, мы реализуем при наведении курсора мыши на область рисунка, причем само “зумирование” будет незначительным и необходимо лишь для визуальной составляющей страниц сайта, то есть для улучшения внешнего вида и акцентирования внимания пользователей на конкретном изображении.

Выше указанный эффект мы с Вами создадим двумя способами. Первый – ручной, в котором мы используем стандартные правила языка CSS3 и второй, с использованием функционала библиотеки UIkit. Конечно, для такого простого эффекта, как увеличение изображений Joomla, сторонняя библиотека не нужна, и Вы в этом убедись далее, но библиотека достаточно мощная и функциональная и в данной статье я хотел бы познакомить Вас с ней, возможно она Вас заинтересует и Вы будете использовать ее в своих дальнейших наработках.

Итак, как я и говорил, для начала реализуем вышеуказанный эффект при помощи языка стилей CSS3. Первым делом, давайте откроем произвольный материал и в качестве изображения вводного текста определим некое изображение, я выбрал стандартное из системы Windows.

1

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

2

Теперь, давайте добавим класс для добавленного изображения. Для этого перейдем в каталог используемого шаблона, в моем случае это Beez3, по адресу templates\beez3. Далее в папке html, перейдем в каталог com_content, в котором содержатся переопределения макетов одноименного компонента. Так как на главной странице, отображается список материалов определенной категории, а значит нас интересуем вид category, поэтому переходим в одноименную папку и открываем в текстовом редакторе файл blog_item.php, который формирует один единственный материала, для дальнейшего отображения.

Его код достаточно большой, но нас интересует следующий участок.

То есть данный участок кода формирует изображение, а значит, давайте добавим класс image, к тегу img.

Обратите внимание, что при добавлении изображения, я не указал его заголовок в одноименном поле, а значит условие if ($images->image_intro_caption) не выполнится, в противном же случае нужно было добавить дополнительный класс к стандартному — caption.

Теперь, возвращаемся в корень каталога шаблона, переходим в папку css и откроем в текстовом редакторе файл personal.css, в который добавим несколько строк кода.

То есть для начала определяем общие правила для элементов с классом image, а затем используя правила transition и transform формируем анимацию увеличения изображений. При этом время анимации и ее тип указывается при помощи transition, а действие, которое будет выполнено, непосредственно в transform. Функция scale(1.2), используется для изменения масштаба элемента по горизонтали и вертикали. В нашем случае, нужно выполнить масштабирование по обеим осям пропорционально, а значит при вызове функции, мы указываем коэффициент масштаба, только в первом параметре. То есть увеличим изображение на 20%. Собственно вот и все, достаточно сохранить изменения и перейти в пользовательскую часть для проверки результатов.

3

Теперь если навести курсор мыши на изображение, Вы увидите плавное увеличение изображения. Теперь, реализуем вышеуказанный функционал, используя библиотеку Uikit. Для этого переходим на официальный сайт библиотеки, и скачаем ее к себе на компьютер, кликнув по кнопке “Download UIkit”.

4

Далее распакуем полученный архив.

5

Содержимое, полученное после распаковки необходимо добавить в соответствующие папки шаблона. Каталог fonts добавляем в корень папки шаблона. Затем откроем в текстовом редакторе файл index.php и подключим к сайту стили и библиотеку Uikit.

Ссылку на страницу официальной документации по библиотеке Uikit Вы найдете на главной странице, в главном меню, под заголовком Core.

6

Здесь нас интересует раздел компонента Overlay, который используется для формирования дополнительный слоев изображений, к которым можно применить различные стили.

7

Соответственно возвращаемся к файлу blog_item.php, который мы с Вами открывали ранее и добавим новые классы при формировании изображения (классы фреймворка Uikit).

При этом используются следующие классы:

uk-overlay – включаем в работу компонент фреймворка Overlay.

uk-overlay-hover – указываем событие, которое необходимо обрабатывать, то есть при наведении мыши будет задействовано масштабирование изображения.

uk-border-rounded – добавляем скруглённые рамки.

uk-overlay-scale – включаем масштабирование изображения при выполнении события hover – то есть наведение курсора мыши.

Сохранив изменения, мы можем перейти в пользовательскую часть и проверить результаты нашей работы. Собственно, теперь Вы знаете, как реализовать в CMS Joomla увеличение картинки.

{

}