close

Filter

loading table of contents...

Frontend Developer Manual / Version 2404

Table Of Contents

6.3.5 Magnific Popup

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

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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.