Lightbox shortcode

The lightbox shortcode enables you to display various types of content within a lightbox by clicking a button or navigation item associated with the #link-id link.

Below are some examples:

Basic Lightbox

Triggered by a button

[button text="Lightbox Button" link="#test"]
[lightbox id="test" width="600px" padding="20px"]
Insert lightbox content here...
[/lightbox]
	

Newsletter Lightbox

Triggered by a link and contains additional elements within the lightbox

<a href="#newsletter-signup-link"><span class="icon-envelop"></span> Newsletter Signup</a>

[lightbox id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]
	

Automatically Open Lightbox (always displayed to the visitor)

Using the option auto_show="always"

[lightbox auto_open="true" auto_timer="3000" auto_show="always" id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]
	

Automatically Open Lightbox (displayed only once to the visitor)

Using the option auto_show="once"

[lightbox auto_open="true" auto_timer="3000" auto_show="once" id="newsletter-signup-link" width="600px" padding="20px"]

[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Sign up for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]