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

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

Раньше я юзал html для вставки Juxtapose в статьи Joomla, но недавно создал плагин для контента content – juxtapose, что на порядок удобнее!

Структура плагина для Joomla3 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 обычным способом:

После установки его необходимо включить!

Вставка в материал content – juxtapose

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

Сравниваемые изображения должны иметь одинаковые пропорции!

Для своего удобства я изображения добавил в спойлер, который может будет по умолчанию (после загрузки страницы) в закрытом состоянии с названием:
Визуальное сравнение ДО / ПОСЛЕ.

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

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

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

Примеры вставки плагина сравнения content – Juxtapose

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

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

Визуальное сравнение ДО/ПОСЛЕ

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

---

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

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

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

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

---

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

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

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

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

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

• 24.03.2025 v.1.0
• 26.04.2025 v.1.1 – juxtapose.js и juxtapose.css загрузятся только при использовании плагина на странице

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