The lightboxes are driven by Visual Composer Single Image shortcodes.
Lightboxes Shortcodes
Single Image
Simple popups with different styles.
DEFAULT
[vc_single_image source=“external_link“ onclick=“img_link_large“ lightbox=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg“]DEFAULT WITH BORDER
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg“]WITH ICON
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ zoom_icon=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg“]HOVER EFFECT
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg“]Simple Image Gallery
Image gallery in the same row.
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project.jpg“]
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg“]
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg“]
Zoom Image Gallery
Image gallery in the same row.
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg“]
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-5.jpg“]
[vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-6.jpg“]
[vc_separator color=“custom“ gap=“tall“ gradient=“yes“]
Zoom Image Gallery + Carousel
[porto_carousel show_nav=“yes“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-3.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-4.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-5.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-6.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-7.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-1.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-2.jpg“][vc_single_image source=“external_link“ external_style=“vc_box_outline“ onclick=“img_link_large“ lightbox=“yes“ image_gallery=“yes“ hover_effect=“yes“ custom_src=“http://sw-themes.com/porto_dummy/wp-content/uploads/images/project-3.jpg“][/porto_carousel]
[vc_separator color=“custom“ gap=“tall“ gradient=“yes“]
[porto_lightbox type=“btn“ btn_skin=“primary“ lightbox_animation=“zoom-anim“ lightbox_size=“sm“ text=“Open with fade-zoom animation“]
[/porto_lightbox][porto_lightbox type=“btn“ btn_skin=“primary“ lightbox_animation=“move-anim“ lightbox_size=“sm“ text=“Open with fade-slide animation“]
[/porto_lightbox]
Dialog with CSS animation
Animations are added with simple CSS transitions, you can make them look however you wish.
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.
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.
[vc_separator color=“custom“ gap=“tall“ gradient=“yes“]
[vc_separator color=“custom“ gradient=“yes“]
Popup with video or map
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
[porto_lightbox display=“block“ type=“btn“ btn_skin=“primary“ lightbox_type=“iframe“ text=“Open YouTube Video“ iframe_url=“http://www.youtube.com/watch?v=0O2aH4XLbto“][/porto_lightbox]
[porto_lightbox display=“block“ type=“btn“ btn_skin=“primary“ lightbox_type=“iframe“ text=“Open Vimeo Video“ iframe_url=“https://vimeo.com/45830194″][/porto_lightbox]
[porto_lightbox display=“block“ type=“btn“ btn_skin=“primary“ lightbox_type=“iframe“ text=“Open Google Map“ iframe_url=“https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom“][/porto_lightbox]
[porto_lightbox display=“block“ lightbox_type=“iframe“ text=“Open YouTube Video“ iframe_url=“http://www.youtube.com/watch?v=0O2aH4XLbto“][/porto_lightbox]
[porto_lightbox display=“block“ lightbox_type=“iframe“ text=“Open Vimeo Video“ iframe_url=“https://vimeo.com/45830194″][/porto_lightbox]
[porto_lightbox display=“block“ lightbox_type=“iframe“ text=“Open Google Map“ iframe_url=“https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom“][/porto_lightbox]
[vc_separator color=“custom“ gap=“tall“ gradient=“yes“]
[porto_lightbox type=“btn“ btn_skin=“primary“ lightbox_type=“ajax“ text=“Load Ajax Content“ ajax_url=“https://www.portotheme.com/wordpress/porto-lightboxes-ajax.html“][/porto_lightbox]
[porto_lightbox type=“btn“ btn_skin=“primary“ text=“Open Form“][contact-form-7 404 "Nicht gefunden"][/porto_lightbox]
[vc_empty_space height=“50px“]
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.
