Lightbox shortcode

The lightbox shortcode lets you open any content inside a lightbox by clicking a button or navigation item with the #link-id link.

Here are some examples:

Simple lightbox

Opened with a button

[button text="Lightbox button" link="#test"]

[lightbox id="test" width="600px" padding="20px"]
  Add lightbox content here...
[/lightbox]

Newsletter lightbox

Opened with a link and the lightbox contains other elements

<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>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]

Auto open lightbox (always opens to the visitor)

With 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>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]

Auto open lightbox (shows only one time to the visitor)

With 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>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]

[/ux_banner]

[/lightbox]