imgArea

Удобная визуальная расстановка областей (map, area) на изображениях
Автор дополнения
Павел
Пакетов
19
Закачек
6 234
Автор дополнения
Пакетов
19
Закачек
6 234
Версия 1.1.3-beta
Дата выпуска 27.09.2016
Загрузки 70
Просмотры 1 011
Внимание, этот компонент требует версию PHP 5.3 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Внимание, этот компонент требует версию MODX не ниже 2.3 !


Компонент позволяет выполнить удобную визуальную расстановку областей (map, area) на изображениях (на схеме, например). Вывод изображения с этими подсвеченными областями и другими плюшками.
Также можно указать разные настройки для каждой созданной области, нажав в верхней панели «Правка», а затем кликнув дважды на области:




Вот так выглядит страница с созданными изображениями в бэкэнде:




Функции:


  • Удобная визуальная расстановка областей на изображениях (на схеме, например).
  • Для каждой области изображения возможность указать свой цвет фона, прозрачность, бордер, форму, текст для tooltip и другое.
  • Можно настроить основной вид области, вид области при наведении и вид области подсвеченной по-умолчанию. Последнее срабатывает, когда для данной области указана опция «Подсветить по-умолчанию». Это означает, что при выводе изображения через сниппет [[imgArea]] эта область будет подсвечена без наведения на неё курсора.
  • Вывод области на сайте по ID через сниппет [[imgArea]]:


Параметры сниппета imgArea:


  • &id — ID картинки.
  • &tpl — Шаблон вывода.
  • &hideInactive — Скрыть неактивные области.
  • &hideActive — Скрыть активные области.
  • &easyTooltip — Вкл/выкл easyTooltip.
  • &textBlock — Отображать alt в стороннем блоке. Укажите #id или .class блока.
  • &textBlockShowHide — Показать/скрыть textBlock при наведении/отведении мыши на область.
  • &bg — Фон — вкл/выкл.
  • &bgColor — Цвет фона (HEX). Короткая запись не сработает: fff, 000.
  • &bgOpacity — Прозрачность фона (от 0.0 до 1.0).
  • &border — Рамка — вкл/выкл.
  • &borderWidth — Толщина рамки (от 0 до 999).
  • &borderColor — Цвет рамки (HEX). Короткая запись не сработает: fff, 000.
  • &borderOpacity — Прозрачность рамки (от 0.0 до 1.0).
  • &defaultSelect — Выделить по-умолчанию — вкл/выкл.

Важно!


  • Сниппет нужно вызывать некэшированным.
  • В бэкэнде, указав параметры для области, обязательно нажать «Применить», а затем в верхней панели кнопку «Сохранить».

Примеры:


1) Обычный вывод изображения с областями:
[[!imgArea?
    &id=`2`
]]

2) Вывод без JS плагина easyTooltip, но с выводом tooltip-текста в блоке #text:
[[!imgArea?
    &id=`2`
    &easyTooltip=`0`
    &textBlock=`#text`
]]
<div id="text">При наведении на область, тут будет появляться текст, указанный для tooltip</div>

Огромная благодарность Вере Лобачёвой за Summer html image map creator!

Обсуждение компонента в сообществе MODX.PRO.

1.1.3-beta (27.09.2016)

  • В сниппет imgArea добавлен параметр unpublishedNoLink, который указывает, ставить ли ссылки в областях ссылающихся на ресурсы со статусом published = 0 (для этого в поле "Ссылка" у области должна быть указана ссылка вида [[~ID]])
  • В сниппет imgArea добавлен параметр textForUnpublished, который позволяет прописать tooltip текст для областей, которые отвечают параметру unpublishedNoLink

1.1.2-beta (27.09.2016)

  • В сниппете imgArea откорректирован запрос на скрытие/показ активных/неактивных областей

1.1.1-pl (23.09.2016)

  • Поправлено отображение easyTooltip поверх блока с высоким z-index

1.1.1-beta (23.09.2016)

  • В классе imgAreaHandler в конфиг добавлен объект elements, за счёт чего вызывать метод imgResize() извне стало проще

1.1.0-beta (23.09.2016)

  • В сниппет imgArea добавлен параметр imgBackgroundSize, который даёт возможность расположить изображение, спрятав края за обрамляющим блоком, если оно не помещается по размерам (похоже на background-size: cover)
  • В сниппет imgArea добавлен параметр imgBackgroundPosition, отвечающий за позицию изображения в обрамляющем блоке (похоже на background-position)
  • Переписана JS часть фронт-энда: добавлен класс imgAreaHandler

1.0.4-beta (06.04.2016)

  • Добавлена галочка открывать ссылки на областях в текущем/новом окне
  • Добавлена возможность в поле ссылки указать JS. Понимает только, как "javascript:здеськод;" И только с одинарными кавычками внутри.

1.0.3-beta (06.04.2016)

  • Поправлен косяк с отображением блока на мобиле, когда после загрузки страницы мобилу развернули горизонтально

1.0.2-beta

  • Добавлен чанк со скриптами инициализации областей изображения
  • Скрипты инициализации вынесены в подвал

1.0.1-beta

  • Поправил адаптивность изображения во фронте
  • Textarea вместо Input[type=text] для Tooltip в бекенде

Последние обсуждения в сообществе MODX.pro