magnific-popup

Magnific popup printing tags in sprint

I am using Magnific Popup for an image gallery. However, the counter is displaying the HTML tags as plain text on the frontend.

Here is my configuration:

$(".open-popup").magnificPopup({
    type: "image",
    fixedContentPos: true,
    gallery: {
        enabled: true,
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>',
    },
});

With the above configuration, the counter is showing the tag as plain text instead of rendering it properly.

Here is the CodePen link for reference: https://codepen.io/swaranan/pen/PwYwoXK

enter image description here

Solution

  • You need to set the allowHTMLInTemplate option to true.

    allowHTMLInTemplate
    false

    Available since 1.2.0. Allows HTML content in the source template (such as text under image). If you enable this - make sure your HTML attributes are sanitized if they can be created by a non-admin user.