Плагин Juxtapose для сравнения 2х изображений в статье для Joomla 3/4

Juxtapose позволяет сравнивать два изображения, передвигая шторку (ползунок) лево – право. На сайте пользователь используя шторку может более пристально рассмотреть изображения и сравнить их в стиле ДО / ПОСЛЕ.

Ни какого html для вставки Juxtapose в статьи Joomla! Именно для этого я создал плагин контента content – juxtapose. Размещение 2х изображений для сравнения сводится до вставки тегов и имен файлов!

Пример работы плагина content juxtapose

Перемещайте разделитель

Структура плагина для Joomla3 vs Joomla4 content – Juxtapose

vodkomotornik\plugins\content\juxtapose\
├── juxtapose.php
├── juxtapose.xml
├── assets/
│   ├── juxtapose.css
│   ├── juxtapose.js
└── language/
    ├── ru-RU/
    │   ├── ru-RU.plg_content_juxtapose.ini
    │   └── ru-RU.plg_content_juxtapose.sys.ini
    └── en-GB/
        ├── en-GB.plg_content_juxtapose.ini
        └── en-GB.plg_content_juxtapose.sys.ini

Устанавливается плагин через административную панель Joomla обычным способом:

После установки должен быть включен!

В админке плагина самые разнообразные настройки на все случаю вставки сравнения изображений в контент Joomla. Если этого мало – можешь своими тегами модифицировать вставляемый код и настроить нужный вид!

Простая вставка в материал content – juxtapose

Особенности плагина juxtapose

1. Поддержка Joomla3 и Joomla4
2. Сравниваемые изображения должны иметь одинаковые пропорции!
3. Изображения имеют ленивую загрузку loading="lazy"
4. .css и .js будут загружены только на страницах с плагином
5. Вывод ошибки если изображение не найдено

Настройка плагина content – Juxtapose

Список дополнительных параметров

• Название спойлера – задаст название
• 0 – спойлер закрыт (можно не указывать)
• 1 – спойлер раскрыт
• img_1.jpg изображение слева (ДО)
• img_2.jpg изображение справа (ПОСЛЕ)

Примеры вставки плагина сравнения 2х изображений content – Juxtapose

Обычная вставка

Визуальное сравнение

Перемещайте разделитель

Свой заголовок спойлера

Свой заголовок спойлера

Перемещайте разделитель

Открытый спойлер

Открытый спойлер

Перемещайте разделитель

Cвои имена меток

Cвои имена меток

Перемещайте разделитель

Теперь ты знаешь, как в контент Joomla! вставить 2 изображения для сравнения!

• 24.03.2025 v.1.0
• 26.04.2025 v.1.1 – juxtapose.js и juxtapose.css загрузятся только при использовании плагина на странице
• 12.06.2025 v.1.2 – добавлена поддержка Joomla4, вывод ошибки при отсутствии изображения, возможность задавать свои метки вместо "ДО" и "После"
• 12.12.2025 v.1.2.1 – убраны ошибки, добавлена возможность включить через админку вывод подписи под изображениями
• 14.12.2025 v. 2.0.0 – добавлены настройки вывода в админке, частично изменен код

juxtapose.css и juxtapose.js можно перенести в файлы шаблона и убрать 2 запроса отключив в админке.

Скачать – плагин Juxtapose для Joomla! 3.x