Lightbox

Single Image with Lightbox

To make one standalone image open in a lightbox (no gallery grouping), wrap it in an anchor pointing at the full-size file and set data-lightbox="image".

<a href="images/portfolio/full/1.jpg" data-lightbox="image" title="Full view">
    <img src="images/portfolio/2/1.jpg" alt="Preview">
</a>

With a zoom transition and inside close button:

<a href="images/portfolio/full/1.jpg"
   data-lightbox="image"
   data-zoom="true"
   data-close-button="inside"
   title="Full view">
    <img src="images/portfolio/2/1.jpg" alt="Preview">
</a>

Notes:

• data-lightbox="image" opens a single image (use gallery only when you want next/prev navigation across several).
• data-zoom="true" animates the thumbnail zooming into the full image.
• data-close-button="inside" puts the close control inside the image frame.
• title becomes the caption. See Showing Lightbox Captions for details.
• The href must point at the large image; the inner <img> is only the thumbnail.

Embed an third-party page, YouTube/Vimeo video, or Google Map in a lightbox with data-lightbox="iframe". The href is the source URL.

<!-- Video -->
<a href="https://www.youtube.com/watch?v=VIDEO_ID" data-lightbox="iframe">Play Video</a>

<!-- External page / map -->
<a href="https://maps.google.com/maps?q=London&output=embed"
   data-lightbox="iframe"
   data-content-position="fixed"
   class="button button-large">
    Open Map
</a>

Attributes:

• data-content-position="fixed": keeps the iframe fixed while scrolling (default auto).
• data-disable-under: disable the lightbox below this viewport width in px (default 600), useful to fall through to a normal link on small screens.

YouTube and Vimeo watch URLs are converted to embeds automatically by Magnific Popup.

Open inline HTML already present on the page inside a lightbox by setting data-lightbox="inline" on the trigger and pointing its href at the hidden content's id.

<a href="#inline-content" data-lightbox="inline" class="button button-large">
    Open Inline HTML
</a>

<div class="d-none">
    <div id="inline-content" class="bg-white p-5" style="max-width:600px;">
        <h3>Inline Content</h3>
        <p>Any HTML here is shown inside the lightbox.</p>
    </div>
</div>

Notes:

• Wrap the hidden block in .d-none so it is invisible until opened.
• Canvas runs its plugin init on the popup content, so widgets inside the inline block work.
• Use data-lightbox="iframe" instead if you want to embed an third-party page/video by URL.

Load remote HTML into a Magnific Popup lightbox by setting data-lightbox="ajax" on a link. The target URL is taken from the href.

<a href="include/portfolio/ajax/1.html" data-lightbox="ajax" class="button button-large">
    Load Ajax Content
</a>

Canvas re-initialises all its plugins on the injected markup automatically (via ajaxContentAdded), so sliders, carousels and animations inside the loaded content work out of the box.

For a group of ajax items browsable like a gallery, use data-lightbox="ajax-gallery" on the container and data-lightbox="ajax-gallery-item" on each link:

<div data-lightbox="ajax-gallery">
    <a href="include/portfolio/ajax/1.html" data-lightbox="ajax-gallery-item">Item 1</a>
    <a href="include/portfolio/ajax/2.html" data-lightbox="ajax-gallery-item">Item 2</a>
</div>

Build a filterable/lightbox image gallery with a .masonry-thumbs grid. Set data-lightbox="gallery" on the container and data-lightbox="gallery-item" on each link.

<div class="masonry-thumbs grid-container row row-cols-3"
     data-big="2"
     data-lightbox="gallery">
    <a class="grid-item" href="images/portfolio/full/1.jpg" data-lightbox="gallery-item">
        <img src="images/portfolio/1.jpg" alt="Gallery Thumb 1">
    </a>
    <a class="grid-item" href="images/portfolio/full/2.jpg" data-lightbox="gallery-item">
        <img src="images/portfolio/2.jpg" alt="Gallery Thumb 2">
    </a>
</div>

Attributes:

• row-cols-*: number of columns per row (Bootstrap grid).
• data-big: comma-separated item numbers to render at double width (e.g. data-big="2,5").
• data-lightbox="gallery" on the wrapper enables grouped lightbox navigation; each href is the full-size image.

Mixed Gallery

A "mixed" gallery is a masonry grid where some tiles are twice the size of the others. Canvas builds this by combining .masonry-thumbs (Isotope layout) with data-big (which items become large) and data-lightbox="gallery" (groups the images into one lightbox).

<div class="masonry-thumbs grid-container row row-cols-2" data-big="3" data-lightbox="gallery">
    <a class="grid-item" href="images/portfolio/full/1.jpg" data-lightbox="gallery-item">
        <img src="images/portfolio/2/1.jpg" alt="Gallery Thumb 1">
    </a>
    <a class="grid-item" href="images/portfolio/full/2.jpg" data-lightbox="gallery-item">
        <img src="images/portfolio/2/2.jpg" alt="Gallery Thumb 2">
    </a>
    <a class="grid-item" href="images/portfolio/full/3.jpg" data-lightbox="gallery-item">
        <img src="images/portfolio/2/3.jpg" alt="Gallery Thumb 3">
    </a>
    <!-- more .grid-item anchors -->
</div>

Notes:

• data-big="3" makes the 3rd child a large tile (2x column width). Pass a comma-separated list for several large tiles, for example data-big="1,4,7".
• Column count comes from Bootstrap grid utilities on the container: row-cols-2, row-cols-md-3, row-cols-4, etc.
• Every clickable tile needs data-lightbox="gallery-item"; the wrapper needs data-lightbox="gallery" so they open as one navigable set.
• The wrapper href on each anchor points to the full-size image; the inner <img> is the thumbnail.

An ajax gallery lets visitors step through several remotely loaded panels inside one lightbox. Mark the wrapper with data-lightbox="ajax-gallery" and each link with data-lightbox="ajax-gallery-item".

<div class="row" data-lightbox="ajax-gallery">
    <div class="col-4">
        <a href="include/portfolio/ajax/1.html" data-lightbox="ajax-gallery-item">
            <img src="images/portfolio/1.jpg" alt="Item 1">
        </a>
    </div>
    <div class="col-4">
        <a href="include/portfolio/ajax/2.html" data-lightbox="ajax-gallery-item">
            <img src="images/portfolio/2.jpg" alt="Item 2">
        </a>
    </div>
</div>

Notes:

• Each href should return a partial HTML fragment.
• Canvas runs its module init on every loaded panel, so nested widgets keep working.
• Navigation between items is by prev/next arrows (image-click navigation is disabled for ajax galleries).

Showing Lightbox Captions

The Canvas lightbox (magnific popup) uses the anchor's title attribute as the caption shown under the enlarged image. Add a title to each lightbox link.

<a href="images/portfolio/full/1.jpg"
   data-lightbox="image"
   title="Sunset over the harbour">
    <img src="images/portfolio/2/1.jpg" alt="Harbour thumbnail">
</a>

Gallery with captions (each item keeps its own title):

<div class="masonry-thumbs grid-container row row-cols-3" data-lightbox="gallery">
    <a class="grid-item" href="images/portfolio/full/1.jpg" data-lightbox="gallery-item" title="First shot">
        <img src="images/portfolio/2/1.jpg" alt="Thumb 1">
    </a>
    <a class="grid-item" href="images/portfolio/full/2.jpg" data-lightbox="gallery-item" title="Second shot">
        <img src="images/portfolio/2/2.jpg" alt="Thumb 2">
    </a>
</div>

Notes:

• The caption text comes from title; leave it off to show no caption.
• Add data-lightbox-class="my-class" on an item to add a custom class to the popup container, or data-lightbox-bg-class="my-bg" to style the overlay, if you want to restyle the caption area.
• Set data-close-button="inside" to place the close button inside the image frame.