The Theme Blvd Framework incorporates a simple, responsive lightbox script 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.

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.

The following shortcode usage will result in images opening up in a lightbox gallery:

[gallery ids="1,2,3,4,5" link="file"]

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.

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.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.