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

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

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

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

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

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

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

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

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

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

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

{juxtapose}img_1.jpg|img_2.jpg{/juxtapose}

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

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

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

{juxtapose=Название спойлера}0|img_1.jpg|img_2.jpg{/juxtapose}

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

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

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

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

{juxtapose}img_1.jpg|img_2.jpg{/juxtapose}

Раскрой сравнение!

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

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

{juxtapose=Свой заголовок спойлера}img_1.jpg|img_2.jpg{/juxtapose}

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

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

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

{juxtapose=Открытый спойлер}1|img_1.jpg|img_2.jpg{/juxtapose}

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

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

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

{juxtapose=Cвои имена меток}0|Левая метка 1|Правая метка 2|img_1.jpg|img_2.jpg{/juxtapose}

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 – добавлены настройки вывода в админке, частично изменен код
• 10.04.2026 v. 2.4.0 – исправлен для соответствия стандартам Joomla 5/6

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

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