Lightboxes

Lightboxes Shortcodes

The lightboxes are driven by Visual Composer Single Image shortcodes.


Single Image

Simple popups with different styles.

DEFAULT
DEFAULT WITH BORDER
WITH ICON
HOVER EFFECT

Simple Image Gallery

Image gallery in the same row.

Zoom Image Gallery

Image gallery in the same row.


Zoom Image Gallery + Carousel


Dialog with CSS animation

Animations are added with simple CSS transitions, you can make them look however you wish.

Open with fade-zoom animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Open with fade-slide animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.


Popup with video or map

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.



Ajax

You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window.

Form

Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.

Open Form
[contact-form-7 404 "Not Found"]
[type='text']
[type='text']
[type='password']
[type='password']
[gravityform id="1" title="true" description="true" ajax="true"]
<div class='gf_browser_unknown gform_wrapper register-free-wrappper_wrapper' id='gform_wrapper_1' ><a id='gf_1' class='gform_anchor' ></a><form method='post' enctype='multipart/form-data' target='gform_ajax_frame_1' id='gform_1' class='register-free-wrappper' action='/lightboxes/#gf_1'> <div class='gform_heading'> <h3 class='gform_title'>Register</h3> <span class='gform_description'>Create a free account and access<span> free slides weekly</span> </span> </div> <div class='gform_body'><ul id='gform_fields_1' class='gform_fields right_label form_sublabel_below description_below'><li id='field_1_1' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_1' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_1_1' type='text' value='' class='large' tabindex='1' placeholder='Username' aria-required="true" aria-invalid="false" /></div></li><li id='field_1_7' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_7_3' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gfield_trigger_change' id='input_1_7'> <span id='input_1_7_3_container' class='name_first' > <input type='text' name='input_7.3' id='input_1_7_3' value='' aria-label='First name' tabindex='3' aria-required="true" aria-invalid="false" placeholder='First Name'/> <label for='input_1_7_3' >First</label> </span> <span id='input_1_7_6_container' class='name_last' > <input type='text' name='input_7.6' id='input_1_7_6' value='' aria-label='Last name' tabindex='5' aria-required="true" aria-invalid="false" placeholder='Last Name'/> <label for='input_1_7_6' >Last</label> </span> </div></li><li id='field_1_3' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_3' ><span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_3' id='input_1_3' type='text' value='' class='large' tabindex='7' placeholder='Email'/> </div></li><li id='field_1_4' class='gfield register-password gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_1_4' ><span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container ginput_container_password' id='input_1_4_container'> <span id='input_1_4_1_container' class='ginput_left'> <input type='password' name='input_4' id='input_1_4' value='' tabindex='8' placeholder='Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4' >Enter Password</label> </span> <span id='input_1_4_2_container' class='ginput_right'> <input type='password' name='input_4_2' id='input_1_4_2' value='' tabindex='9' placeholder='Confirm Password' aria-required="true" aria-invalid="false" /> <label for='input_1_4_2' >Confirm Password</label> </span> <div class='gf_clear gf_clear_complex'></div> </div></li><li id='field_1_8' class='gfield gform_validation_container field_sublabel_below field_description_below' ><label class='gfield_label' for='input_1_8' >Comments</label><div class='ginput_container'><input name='input_8' id='input_1_8' type='text' value='' /></div><div class='gfield_description'>This field is for validation purposes and should be left unchanged.</div></li> </ul></div> <div class='gform_footer right_label'> <input type='submit' id='gform_submit_button_1' class='gform_button button' value='SIGN UP' tabindex='10' onclick='if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; jQuery("#gform_1").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=1&amp;title=1&amp;description=1&amp;tabindex=1' /> <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='1' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjdmODFjYTNhMTJmMmM4MWZhZGQ3ZTQ4YWQ2ZGNjMjJhIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_1' id='gform_ajax_frame_1'>This iframe contains the logic required to handle AJAX powered Gravity Forms.</iframe> <script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_1').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_1');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_1').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;if(is_form){jQuery('#gform_wrapper_1').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_1').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_1').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_1').offset().top); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_1').val();gformInitSpinner( 1, 'https://slidestore.com/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [1, current_page]);window['gf_submitting_1'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message_1').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_1').replaceWith('<' + 'div id=\'gforms_confirmation_message_1\' class=\'gform_confirmation_message_1 gforms_confirmation_message\'' + '>' + confirmation_content + '<' + '/div' + '>');jQuery(document).scrollTop(jQuery('#gforms_confirmation_message_1').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [1]);window['gf_submitting_1'] = false;}, 50);}else{jQuery('#gform_1').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [1, current_page]);} );} );</script><script type='text/javascript'> if(typeof gf_global == 'undefined') var gf_global = {"gf_currency_config":{"name":"U.S. Dollar","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2},"base_url":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"https:\/\/slidestore.com\/wp-content\/plugins\/gravityforms\/images\/spinner.gif"};jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 1) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [1, 1]) } ); </script>