Using Magnific Popup in Backlight

In Backlight 1.0.3, we added Magnific Popup to the standard page framework. This is exciting, because popups can now exist anywhere within a Backlight-based website. We're already using popups extensively in the Cart and Client Response add-ons, but users can also create their own by dropping the relevant HTML into any page copy area, or via PHPlugins. No additional scripting or styling is necessary.

Best of all, it's really easy to build a popup. Let's start learning by example. There are several different types of popups available for use, including inline, image and iframe types. We'll be starting with the inline type popup.

Inline Popups

An inline popup has two components, the trigger and the content. The trigger is the button or link one clicks to open the popup, while the content encompasses both the structural markup and content of the popup itself. For the inline popup, the two parts look like this:

/* The Trigger */
<a class="mfp-inline" href="#the__popup">Trigger</a>

/* The Content */
<div id="the__popup" class="mfp-popup mfp-hide">
    <p class="page__ui mfp-title">Popup Title</p>
    <div class="content clearfix">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate egestas dignissim. Phasellus tincidunt interdum eleifend. Nam sollicitudin tempus libero, at imperdiet sem dignissim ac. Sed tellus turpis, faucibus sit amet mauris in, vehicula consectetur tortor.</p>

    </div>
</div>

And you can try that code out by clicking here.

Popup Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate egestas dignissim. Phasellus tincidunt interdum eleifend. Nam sollicitudin tempus libero, at imperdiet sem dignissim ac. Sed tellus turpis, faucibus sit amet mauris in, vehicula consectetur tortor.

The trigger can also be coded as a button:

/* The Trigger */
<button class="mfp-inline" href="#the__popup">Trigger</button>

Take note, the only markup difference between these two triggers is that we've swapped the a element for a button element; the class and href attributes are identical.

The trigger's class tells Magnific the type of popup to launch, so class="mfp-inline" means that we're launching an inline popup. The trigger's href attribute tells Magnific where to find the popup's content, and must match the id attribute of the content. In the example above, the trigger is targeting "#the__popup", and our content as the id "the__popup".

Image Popups

Image popups require a trigger and a target image. The trigger uses the class mfp-image, and the href targets the image file.

/* The Trigger */
<a class="mfp-image" href="path/to/image.jpg">Trigger</a>

Image popups do not require content markup. Click here to pop an image.

You can wrap the trigger link around a thumbnail if you'd like; click it:

A Cambodian lizard.

/* Thumbnail as Trigger */
<a class="mfp-image" href="path/to/image.jpg"><img alt="A Cambodian lizard." src="path/to/thumbnail.jpg" /></a>

iFrame Popups

iFrame Popups can be used only for supported content types. See the Magnific Popup website for details. Use the mfp-iframe class for the trigger, and target the content URL. Here's an example for YouTube video:

<button class="mfp-iframe" href="https://www.youtube.com/watch?v=hSa_hbutFt0">YouTube Video</button>

Image Galleries On-the-fly

You can wrap multiple image popups in a div with class "mfp-image-gallery" to build galleries on-the-fly.

<div class="mfp-image-gallery">
    <a class="mfp-image" href="path/to/image_01.jpg">Image 01</a>
    <a class="mfp-image" href="path/to/image_02.jpg">Image 02</a>
</div>

Above, the inline popup is inside the gallery div with the images, but is not included in the gallery sequence.

Mixed-media Galleries On-the-fly

Similar to image galleries, we can create mixed-media galleries by wrapping with the "mfp-mixed-media" class:

<div class="mfp-mixed-media">
    <a class="mfp-image" href="path/to/image_01.jpg">Image 01</a>
    <a class="mfp-image" href="path/to/image_02.jpg">Image 02</a>
    <button class="mfp-inline" href="#the__popup">Inline Popup</button>
    <button class="mfp-iframe" href="https://www.youtube.com/watch?v=hSa_hbutFt0">YouTube Video</button>
</div>

A Cambodian monkey. A carving at Bayon temple.

Coda

And there you have it! Have fun with your popups!