JavaScript API

PixMapr fires a documented event for every hotspot interaction, and exposes one global, window.PixMapr, for themes and integrations.

Events

Five events fire on the hotspot element and bubble, so binding on document or the container both work:

• pixmapr:activate: a hotspot opened
• pixmapr:deactivate: a hotspot closed
• pixmapr:click: a hotspot was clicked
• pixmapr:hover: the pointer entered a hotspot
• pixmapr:leave: the pointer left a hotspot

The handler’s second argument is the hotspot:

jQuery(document).on('pixmapr:activate', function (e, hotspot) {
    console.log(hotspot.title, hotspot.action);
});

The hotspot object carries spot (its number), title, href, action, layout, trigger, style, target, and element (the DOM node).

window.PixMapr

PixMapr.init() re-measures every interactive image on the page. Call it after revealing an image that was hidden when the page loaded, inside a tab, an accordion, or a toggled panel, so the image renders at its real size:

jQuery(document).on('click', '.my-tab', function () {
    window.PixMapr.init();
});

Elementor popups are handled automatically; images initialize when the popup opens.