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:

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

• magnific-popup

1 Answer 1

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.