Lightbox – Shortcodes Ultimate

Lightbox with an Image

Shortcode

[su_lightbox type="image" src="https://placehold.co/600x400?text=Example+Image"]
[su_button] Open lightbox with an image [/su_button]
[/su_lightbox]

Lightbox with a Webpage (Iframe)

Shortcode

[su_lightbox type="image" src="https://example.com/" type="iframe"]
[su_button] Open lightbox with example.com [/su_button]
[/su_lightbox]

Lightbox with a YouTube Video

Shortcode

[su_lightbox type="iframe" src="https://www.youtube.com/watch?v=bcQh3b0LJyk"]
[su_button] Open lightbox with a YouTube video [/su_button]
[/su_lightbox]

Lightbox with Custom Inline Content

Shortcode

[su_lightbox type="inline" src="#my-custom-popup"]
[su_button] Open lightbox with custom HTML content and shortcodes [/su_button]
[/su_lightbox]

[su_lightbox_content id="my-custom-popup"]

<h3>Custom HTML content</h3>

Any <strong>HTML</strong> <em>tags</em> can be used here. Other shortcodes are also [su_highlight]allowed[/su_highlight].

[/su_lightbox_content]

Custom Trigger Element

You can wrap any element with the lightbox shortcode to make it open a lightbox

Shortcode

[su_lightbox type="iframe" src="https://www.youtube.com/watch?v=bcQh3b0LJyk"]
[su_highlight] WATCH VIDEO [/su_highlight]
[/su_lightbox]

[su_lightbox type="image" src="https://placehold.co/600x400?text=Example+Image"]
<img src="https://placehold.co/400x100?text=Open+Lightbox" alt="Open Lightbox" />
[/su_lightbox]

Using with Forms

If your form has shortcode, you can show that shortcode inside of a lightbox. See the example below:

Shortcode

[su_lightbox type="inline" src="#my-contact-form-lightbox"]
[su_button] CONTACT US [/su_button]
[/su_lightbox]

[su_lightbox_content id="my-contact-form-lightbox"]
[YOUR_CONTACT_FORM_SHORTCODE]
[/su_lightbox_content]