Image Interest Points

Highlight the points of interest of an image and provide additional details for each one.

Dependencies

• Modal Window

How to

The Image Interest Points component is used to mark the points of interest of an image; each point opens a modal window with additional information.

To connect each point of interest to a modal window, make sure the id value of the modal is equal to the aria-controls value of the .poi__btn element.

The position of each point can be set using top/right/bottom/left in the inline style attribute of the .poi__item element:

<li style="top: 10%; left: 50%;" class="poi__item js-poi__item">
  <!-- button element here -->
</li>

Important: use percentage values to preserve the position of the point of interest when the image resizes at different breakpoints.

Categories

• Ecommerce > Plugin
• Plugins > Misc
• Overlays

Bug report & feedback

Component Github page ↗