Frontend Developer Manual / Version 2406.1
Table Of Contents
The magnific-popup API brick provides a responsive lightbox and dialog script with any device support.
Technical Description
The magnific-popupuses the library Magnific Popup.
In combination with node-decoration-service and mediaelement it delivers
a robust lightbox for video, images and text.
import { addNodeDecoratorByData } from "@coremedia/brick-node-decoration-service";
import { default as magnificPopup } from "@coremedia/brick-magnific-popup";
...
addNodeDecoratorByData(
{},
"cm-product-assets",
function($target) {
const $carousel = $target.find(".cm-product-assets__carousel");
magnificPopup($carousel, {
gallery: { enabled: true },
delegate: ".cm-product-asset[data-cm-product-asset-gallery-item]",
callbacks: {
...
},
});
}
);
Example 6.2. Carousel Example
Note
Please note that this brick contains JavaScript files, what will automatically be installed, if you add
the brick to your theme package.json. See Section 5.3, “Using Bricks” to learn how to install a brick in your theme.
