Хотел бы отметить, что сегодня для джумла увеличение картинки, мы реализуем при наведении курсора мыши на область рисунка, причем само “зумирование” будет незначительным и необходимо лишь для визуальной составляющей страниц сайта, то есть для улучшения внешнего вида и акцентирования внимания пользователей на конкретном изображении.
Выше указанный эффект мы с Вами создадим двумя способами. Первый – ручной, в котором мы используем стандартные правила языка CSS3 и второй, с использованием функционала библиотеки UIkit. Конечно, для такого простого эффекта, как увеличение изображений Joomla, сторонняя библиотека не нужна, и Вы в этом убедись далее, но библиотека достаточно мощная и функциональная и в данной статье я хотел бы познакомить Вас с ней, возможно она Вас заинтересует и Вы будете использовать ее в своих дальнейших наработках.
Итак, как я и говорил, для начала реализуем вышеуказанный эффект при помощи языка стилей CSS3. Первым делом, давайте откроем произвольный материал и в качестве изображения вводного текста определим некое изображение, я выбрал стандартное из системы Windows.
Изображение довольно большое и в пользовательской части с использованием шаблона Beez3, материал будет выглядеть следующим образом.
Теперь, давайте добавим класс для добавленного изображения. Для этого перейдем в каталог используемого шаблона, в моем случае это Beez3, по адресу templates\beez3. Далее в папке html, перейдем в каталог com_content, в котором содержатся переопределения макетов одноименного компонента. Так как на главной странице, отображается список материалов определенной категории, а значит нас интересуем вид category, поэтому переходим в одноименную папку и открываем в текстовом редакторе файл blog_item.php, который формирует один единственный материала, для дальнейшего отображения.
Его код достаточно большой, но нас интересует следующий участок.
|
1
2
3
4
5
6
7
8
9
10
|
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
|
То есть данный участок кода формирует изображение, а значит, давайте добавим класс image, к тегу img.
|
1
2
3
4
5
6
7
8
9
10
|
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class = "image" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
|
Обратите внимание, что при добавлении изображения, я не указал его заголовок в одноименном поле, а значит условие if ($images->image_intro_caption) не выполнится, в противном же случае нужно было добавить дополнительный класс к стандартному — caption.
Теперь, возвращаемся в корень каталога шаблона, переходим в папку css и откроем в текстовом редакторе файл personal.css, в который добавим несколько строк кода.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.image {
overflow:hidden;
width: 380px;
height:250px;
}
.image img {
transition: all 1s ease-out;
}
.image img:hover{
transform: scale(1.2);
}
|
То есть для начала определяем общие правила для элементов с классом image, а затем используя правила transition и transform формируем анимацию увеличения изображений. При этом время анимации и ее тип указывается при помощи transition, а действие, которое будет выполнено, непосредственно в transform. Функция scale(1.2), используется для изменения масштаба элемента по горизонтали и вертикали. В нашем случае, нужно выполнить масштабирование по обеим осям пропорционально, а значит при вызове функции, мы указываем коэффициент масштаба, только в первом параметре. То есть увеличим изображение на 20%. Собственно вот и все, достаточно сохранить изменения и перейти в пользовательскую часть для проверки результатов.
Теперь если навести курсор мыши на изображение, Вы увидите плавное увеличение изображения. Теперь, реализуем вышеуказанный функционал, используя библиотеку Uikit. Для этого переходим на официальный сайт библиотеки, и скачаем ее к себе на компьютер, кликнув по кнопке “Download UIkit”.
Далее распакуем полученный архив.
Содержимое, полученное после распаковки необходимо добавить в соответствующие папки шаблона. Каталог fonts добавляем в корень папки шаблона. Затем откроем в текстовом редакторе файл index.php и подключим к сайту стили и библиотеку Uikit.
|
1
2
|
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template .'/css/uikit.css');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/javascript/uikit.js', 'text/javascript');
|
Ссылку на страницу официальной документации по библиотеке Uikit Вы найдете на главной странице, в главном меню, под заголовком Core.
Здесь нас интересует раздел компонента Overlay, который используется для формирования дополнительный слоев изображений, к которым можно применить различные стили.
Соответственно возвращаемся к файлу blog_item.php, который мы с Вами открывали ранее и добавим новые классы при формировании изображения (классы фреймворка Uikit).
|
1
2
3
4
5
6
7
8
9
10
|
<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="uk-overlay uk-overlay-hover uk-border-rounded img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="uk-border-rounded uk-overlay-scale caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
class="uk-border-rounded uk-overlay-scale" width="380px" height="250px" src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</div>
<?php endif; ?>
|
При этом используются следующие классы:
uk-overlay – включаем в работу компонент фреймворка Overlay.
uk-overlay-hover – указываем событие, которое необходимо обрабатывать, то есть при наведении мыши будет задействовано масштабирование изображения.
uk-border-rounded – добавляем скруглённые рамки.
uk-overlay-scale – включаем масштабирование изображения при выполнении события hover – то есть наведение курсора мыши.
Сохранив изменения, мы можем перейти в пользовательскую часть и проверить результаты нашей работы. Собственно, теперь Вы знаете, как реализовать в CMS Joomla увеличение картинки.