new

imgArea

Convenient visual areas arrangement (map, area) on images
На русском Demo
На русском Demo
imgArea image area map area area
Павел
The author
Павел
Packages
33
Downloads
42 927
Автор дополнения
Павел Павел
Packages
33
Downloads
42 927
Usually answers within 24 hours

msOrderFiles

Attaching files to the miniShop2 order

debugParser

Find your slow scripts

msDeliveryOnMap

Calculation of delivery by clicking on the map
Version 1.1.7-beta
Release date 06.01.2023
Downloads 166
Views 2 527
Warning! This component requires PHP version 5.3 or higher! If your site uses PHP less than required, the installation of this package could break it.
Warning! This package requires MODX not less than 2.3 !


The component allows you to make convenient visual areas arrangement (map, area) on images (in the scheme, for example). Implements the image output with these highlighted areas.
You can also specify different settings for each created area by clicking on the top panel «Edit», and then clicking twice on the area:



The page with the created images in the backend looks like this:



Functions:


  • Convenient visual areas arrangement on images (on a scheme, for example).
  • For each image area, you can specify your background color, transparency, border, shape, text for tooltip, and more.
  • You can customize the basic area view, the area type when hovering, and the area type highlighted by default. The latter works when the option «Highlight by default» is specified for this area. This means that when the image is output through the [[imgArea]] snippet, this area will be highlighted without pointing the cursor at it.
  • Output of the domain on the site by ID via snippet [imgArea]:


ImgArea snippet parameters:


  • &id — picture ID.
  • &tpl — Output template.
  • &hideInactive — Hide inactive areas.
  • &hideActive — Hide active areas.
  • &easyTooltip — On / off easyTooltip.
  • &textBlock — Display alt in the third-party block. Specify the #id or .class block.
  • &textBlockShowHide — Show / hide textBlock when hovering / hovering the mouse over the area.
  • &bg — Background — on / off.
  • &bgColor — The background color (HEX). A short entry does not work: fff, 000.
  • &bgOpacity — Background transparency (from 0.0 to 1.0).
  • &border — Frame — on / off.
  • &borderWidth — The thickness of the border (from 0 to 999).
  • &borderColor — The border color (HEX). A short entry does not work: fff, 000.
  • &borderOpacity — Frame transparency (0.0 to 1.0).
  • &defaultSelect — Select by default — on / off.

Important!


  • You need to call the snippet un-cached.
  • In the backend, specifying the parameters for the area, you must click «Apply», and then in the top pane the «Save» button.

Examples:


1) Normal images display with areas:
[[!imgArea?
    &id=`2`
]]

2) Output without JS plugin easyTooltip, but with the output of the tooltip-text in the block #text:
[[!imgArea?
    &id=`2`
    &easyTooltip=`0`
    &textBlock=`#text`
]]
<div id="text">When you hover over an area, the text specified for tooltip will appear here</div>

Many thanks to Vera Lobatcheva for Summer html image map creator!

Thread in MODX.PRO community.

1.1.7-beta (01.06.2023)

  • Исправлена работа в админке на серверах с локалью, где числа с плавающей точкой пишутся через запятую

1.1.6-beta (02.06.2020)

  • Исправлена работа на серверах с локалью, где числа с плавающей точкой пишутся через запятую

1.1.5-pl (25.10.2018)

  • Добавлена обновлённая версия ImageMapster
  • Исправлен косяк в чанке tpl.imgArea.scripts с ошибкой "Could not find snippet with name [+id"

1.1.5-beta2 (25.10.2018)

  • Исправлена ошибка при установке "Could not create table ..."

1.1.5-beta (25.10.2018)

  • Исправлена ошибка при установке "Could not create table ..."

1.1.4-beta (01.08.2018)

  • Исправлен тип данных в схеме БД с "text" на "string"

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 в бекенде