24 Hour Emergency Service 703-450-5898

Lightbox

//Lightbox
Lightbox2019-02-06T23:52:25+00:00
[lightbox link=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181.jpeg” thumb=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181.jpeg” title=”Lightbox Example” frame=”true” icon=”image”] 
[lightbox link="http://yoursite.com/image.jpg" thumb="http://yoursite.com/thumbnail.jpg" title="Lightbox Example" frame="true" icon="image"]
[lightbox link=”https://vimeo.com/11178250″ thumb=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181.jpeg” title=”Video Lightbox Example” frame=”true” icon=”video”] 
[lightbox link="https://vimeo.com/11178250" thumb="http://yoursite.com/thumbnail.jpg" title="Video Lightbox Example" frame="true" icon="video"]

Options

Argument Default Description
link (required) None

The full URL of what you want to link to in the lightbox. This can be a link to an image, a YouTube of Vimeo video page, or a Google map embed URL.

Examples:
http://yoursite.com/uploads/image.jpg
http://youtube.com/watch?v=123456
http://vimeo.com/123456
https://maps.google.com/maps?q=London,+United+Kingdom
thumb (required) None The full URL to the thumbnail image that will lead to the lightbox image.
Ex: http://yoursite.com/uploads/image.jpg
title None Title to display in the lightbox popup.
width None The width of the thumbnail image – 70, 70%, etc.
align none Alignment of thumbnail image – none, left, right.
frame true Whether to wrap the thumbnail in a frame – true, false.
icon image When thumbnail is framed, what icon to display when hovered on – image, video.

Note: The default “image” option is generally just a plus symbol, in most themes, which can be used for many different purposes.
class None Optional CSS class for custom styling to append to the <a> tag, or the outer frame, if enabled.
For more information on generating Google Maps URLs, see this article: Quick Tip: Embedding New Google Maps

When you have several lightbox items on the same page, you can link them into a gallery. This means that when in the lightbox popup, the user can navigate from item to item without leaving the lightbox.

To do this, you can simply wrap multiple instances of the [lightbox] shortcode in the [lightbox_gallery] shortcode.

[raw] [lightbox_gallery] [lightbox link=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181.jpeg” thumb=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181-150×150.jpeg” title=”Lightbox Example” frame=”true” icon=”image” align=”left”] [lightbox link=”https://vimeo.com/11178250″ thumb=”http://shortcodes.themeblvd.com/files/2011/10/flickr_181-150×150.jpeg” title=”Video Lightbox Example” frame=”true” icon=”video” align=”left”] [clear] [/lightbox_gallery] [/raw] 
[raw]
[lightbox_gallery]
[lightbox link="http://yoursite.com/image.jpg" thumb="http://yoursite.com/thumbnail.jpg" title="Lightbox Example" frame="true" icon="image" align="left"]
[lightbox link="https://vimeo.com/11178250" thumb="http://yoursite.com/thumbnail.jpg" title="Video Lightbox Example" frame="true" icon="video" align="left"]
[/lightbox_gallery]
[/raw]

Auto Lightbox

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.

https://vimeo.com/65843469