Lightbox Integration

The Theme Blvd Framework incorporates a simple, responsive lightbox plugin called Magnific Popup.

Lightbox Options

From your Theme Options, you'll find a universal set of options that apply to the use of lightboxes within your site. Appearance > Theme Options > Content > Lightbox

Featured Images

Lightbox integration extends to linking the featured images of your standard posts.

When editing a post, you can find these settings within the "Post Options" meta box.

Gallery Integration

When inserting a standard WordPress [gallery], linking thumbnails to the Media Files, will allow your theme to automatically link them all to lightbox popups.

In other words, the following shortcode usage will result in images opening up in a lightbox gallery:

[gallery ids="1,2,3,4,5" link="file"]
In order to insert this automatically, select for the thumbnails to Media Link to the file, when inserting your gallery.

Auto Lightbox

If you've installed our shortcodes plugin, you will have the Auto Lightbox feature enabled by default. The Auto Lightbox feature will automatically convert images inserted into pages and posts into the [lightbox] shortcode when they link to a lightbox-compatible URL. Note that you can disable this functionality from Settings > Writing > Theme Blvd Shortcodes in your WordPress admin.

This video will take you the the Auto Lightbox feature, which comes with our shortcodes plugin.

Manually Linking to a Lightbox

If you're comfortable with basic HTML, you can also link to a lightbox quite easily. Below are some examples.

Image

<a href="http://yoursite.com/uploads/image.jpg" class="themeblvd-lightbox mfp-image" title="Title Here">
    <img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>

Vimeo

<a href="https://vimeo.com/1234568" class="themeblvd-lightbox mfp-iframe" title="Title Here">
  <img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>

YouTube

<a href="https://youtube.com/?watch=1234568" class="themeblvd-lightbox mfp-iframe" title="Title Here">
  <img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>

Google Map

<a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom" class="themeblvd-lightbox mfp-iframe" title="Title Here">
  <img src="http://yoursite.com/uploads/thumbnail.jpg" />
</a>

Inline DIV

<div id="myPopup" class="white-popup mfp-hide">Some content...</div>
<a href="#myPopup" class="themeblvd-lightbox mfp-inline" title="Title Here">Link to lightbox content</a>

For complete documentation on using Magnific Popup, make sure to visit the official website, which you can find here.