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]