[imgArea] Удобная визуальная расстановка областей (map, area) на изображениях


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

Также можно указать разные настройки для каждой созданной области нажав в верхней панели «Правка» и после кликнув пару раз на области:


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


Сразу демо — http://imgarea.demo.gvozdb.ru/

Что умеет


  • Удобная визуальная расстановка областей на изображениях (на схеме, например),
  • Для каждой области изображения возможность указать свой цвет фона, прозрачность, бордер, форму, текст для 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>


Благодарности



Пакет доступен в modStore.pro
Павел Гвоздь
Павел Гвоздь
19 декабря 2015, 20:23
modx.pro
13
4 773
+18
Поблагодарить автора Отправить деньги

Комментарии: 18

Владимир
Владимир
20 декабря 2015, 00:23
0
Полезная штуковина!
    Илья
    Илья
    20 декабря 2015, 01:36
    0
    Как Вы это делаете!!!?
    Мне понадобится!
    Жду…
      Денис Богдановский
      Денис Богдановский
      20 декабря 2015, 12:29
      +1
      Ого! Не хило… ). Полезный компонен!
        Павел Гвоздь
        Павел Гвоздь
        20 декабря 2015, 13:57
        +1
        Я тут демку подготовил. Позже сделаю её более информативной. А пока так — imgarea.pa6ok.ru/
            Денис
            Денис
            21 декабря 2015, 09:12
            0
            Недавно стояла подобная задача. Есть поддержка адаптивных изображений?
            Алексей Федоров
            Алексей Федоров
            24 декабря 2015, 14:19
            0
            теперь я знаю как вывести на сайте свою «карту мира», созданную в графредакторе, и снабдить пояснениями)) Ждем-с стабильную версию=)
            Sergey
            Sergey
            06 апреля 2016, 01:22
            0
            Спасибо за разработку! И сразу два вопросика :)
            1) При клике как открывать ссылку в этомже окне браузера
            2) есть ли возможность открыть в модальном окне. Для чего нужно — на странице скажем есть изображение двухэтажного здания, нарисованное через ваш модуль, кликаем по первому этажу и открывается модальное окно с планом первого этажа, но тоже нарисованного в вашем модуле, т.е. с возможностью выделения и перехода по ссылкам
              Павел Гвоздь
              Павел Гвоздь
              06 апреля 2016, 11:51
              0
              1) При клике как открывать ссылку в этомже окне браузера
              Выкатил новую версию:

              1.0.4-beta (06.04.2016)
              ==============
              — Добавлена галочка открывать ссылки на областях в текущем/новом окне
              — Добавлена возможность в поле ссылки указать JS. Понимает только, как «javascript: здеськод;» И только с одинарными кавычками внутри.
                Sergey
                Sergey
                09 апреля 2016, 12:49
                0
                Огромное спасибо! То что нужно! Теперь бы еще доработать указание ссылок, чтобы можно было автоматом циплять из самого модх :) Но и то что сделано, уже очень круто!
              SonG
              SonG
              09 августа 2018, 00:07
              0
              Было бы не плохо в след. обнове увидеть функцию копирования областей =).
              P.S. За компонент респект ;)
                Сергей
                Сергей
                07 сентября 2018, 16:59
                0
                Хотелось бы уточнить, можно ли делать области неправильной фигуры? На примерах показаны только прямоугольники. Интересен вопрос именно в построении сложных многоугольников.
                Victor
                Victor
                21 сентября 2018, 14:10
                0
                Скажите, текст при наведении на блок берется из alt=""
                &textBlock — Отображать alt в стороннем блоке. Укажите #id или .class блока.

                В alt можно написать только текст, а можно ли отображать произвольный html при наведении на блок?
                  Павел Гвоздь
                  Павел Гвоздь
                  22 сентября 2018, 00:15
                  0
                  Вообще можно, но как-то косячно оно работает. Всё никак руки не доходят до этого.
                  Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                  18