Увеличение изображения при нажатии на него

Привет, всем кто это читает)


В этой статье мы научимся делать увеличение изображения при нажатии на него.


Для этого будем использовать общедоступный плагин Spthumbnail.

Итак, начнем...


Установка данного плагина ничем не отличается от обычной установки расширения Joomla.


Скачиваем данный плагин - Spthumbnail.


Заходим в админ-панель joomla, идем в вкладку "Расширения" - "Менеджер расширений".


Выбираем установочный архив и устанавливаем его.


Увеличение изображения при нажатии на него


После удачной установки, у Вас появится такая картина с надписью - "Не забудьте включить плагин", сейчас этим и займемся.


sp thumbnail joomla установка


Переходим в "Менеджер плагинов" и ищем надпись Spthumbnail.


joomla 3 увеличение картинки по клику


Заходим в настройки Spthumbnail, то есть нажимаем на него.


Вот какой он изнутри, минимум настроек, зато легкий в использовании.


Первое, что сделаем, это включим его.


Потом можно приступать к изменению основных параметров плагина:

  • выбрать для каких элементов он будет использоваться (Только класс, кроме класса, Все изображения);
  • дать название классу, для которого будем применять Spthumbnail.


увеличение изображения при нажатии плагин


В данном обзоре я покажу применение к указанному CSS классу.


Для примера даем название uvelichenie и нажимаем "Сохранить".


плагин увеличения изображений для joomla 3


Теперь давайте применим увеличение к какому-то изображению.

Создаем материал под названием "Проверка" и добавляем туда любую картинку.


Идем в редактирование html и внутри тега img пишем класс, который указывали в настройках плагина, у меня это class="uvelichenie".


увеличение картинки


Сохраняем материал и выводим его где-то на сайте.


sp thumbnail joomla


Кликаем на добавленную картинку.


И у нас получается такой результат:


увеличение изображения


Все работает.


Вот мы и сделали увеличение изображения при клике, легко и просто.

Вы так же можете попробовать варианты: Кроме класса, все изображения.


На этом все, удачи в Ваших проектах)


Ваше мнение важно для нас. Пишите Ваши комментарии.

Хотите комплексно решить Ваш вопрос? 

Перейдите в наш раздел видео-курсов

2 Комментарии

Почему в helix не работает?

Ответить Поделиться

Если 2 картинки рядом в строке, то плагин их ставит вертикально. Ерунда какая-то.

Ответить Поделиться

Не смогли найти, то что искали? Воспользуйтесь поиском

Популярные статьи

Последние статьи


Рекомендуем хостинг

 

 

BeGet

 

30 дней бесплатно!

 

Дополнительно Вы получаете бонусные домены, которые можно использовать как для регистрации, так и для продления доменов в зонах .RU, .РФ, .ONLINE, .SPACE, .SITE, .WEBSITE, .FUN, .HOST, .PRESS, .PW.