Reactbox | React.js based lightbox that rocks
14869
home,page-template,page-template-full_width,page-template-full_width-php,page,page-id-14869,ajax_fade,page_not_loaded,boxed,,columns-4,qode-theme-ver-13.3,qode-theme-bridge,disabled_footer_top,wpb-js-composer js-comp-ver-5.4.5,vc_responsive

Introducing L lightbox

L lightbox is a state-of-the art modern lightbox used in UberGrid and Awesome Gallery plugins.

It is designed with a mobile-first approach in mind, is fast, has contemporary design and a widest feature set ever.

01 Many content types

L lightbox supports a lot of content types: images, Youtube and Vimeo videos, html content, Google maps and iframe content. You can put all those objects to your lightbox using a flexible lightbox editor. All the types supported can be displayed in 3 available layouts.

02 Existing images and videos

You can use L lightbox for exiting image galleries with a very little configuration – with no configuration for single images or videos, and with two-settings configuration for galleries.

03 Lightbox builder

Built-it lightbox builder allows you to construct the content displayed and link to it from any link. 3 different lightbox layouts, separate download link and black/white themes are at your service.

04 Built-in gallery

A simple responsive image gallery is included – just for a case. Nothing too fancy, but you don’t need a separate plugin for that.

05 Contact form integration

Do you want to have your Contact Form 7 in a nice lightbox? No problem – you can have it that after a 2-minute configuration. No coding.

06 WooCommerce products

You can display your WooCommerce shortcodes in a lightbox to represent your store’s unique products.

01. Content types supported

The list of the content types supported is below. Please note, that you can mix different content types in the same lightbox.

Live example

You can click any of the images below to see how L lightbox handles them in real life.

Features:

  • png, jpeg and gif images are supported.
  • You can use one of the 3 lightbox layouts with images.
  • You can set a separate downloadable image URL if you want your visitors to download the video or some other file. URL has to be provided manually.
  • Thumbnail carousel is displayed below the videos. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix images with other content types in the same lightbox.

How to build

This process describes the steps required to build L lightbox using a built-in editor.

Step 1. Creating a lightbox

Open WordPress admin area, find “Reactbox” section there, then click “Add new”:

Step 2: Give it a name

Enter some readable name to the large title input box. It will make it easier to find the lightbox in future:

Step 3: Add items

You can add images one by one by using “Add item”, or in “bulk” mode by clicking “Add multiple”:

Step 4: (One by one mode only) Select the image.

Click the “photo camera” icon to select the image:

Select the image you want in the popup.

Step 5: (Fine tuning 1) Click “More options” and set the options up to your needs:

Options available should be self-explanatory, if you have any questions – feel free to ask them in the support section.

Step 6. Save it

Click “Publish” or “Update” at the right-hand “Publish” box:

Step 7: Ready to use it.

Your lightbox is built and ready for usage. Now you can copy a shortcode to display it as the built-in gallery, or link address to open it using some link:

Live example

You can click any of the images below to see how L lightbox handles them in real life.

Features:

  • Youtube, Vimeo and mp4 videos are supported.
  • You can use one of the 3 lightbox layouts with videos.
  • You can set a separate downloadable URL if you want your visitors to download the video or some other file. URL has to be provided manually.
  • Thumbnail carousel is displayed below the videos. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix videos with other content types in the same lightbox.

Live example

You can click any of the images below to see how L lightbox handles them in real life.

Features:

  • Google maps are recommended, but you can use other services if they support IFRAMEs.
  • You can use one of the 3 lightbox layouts with maps.
  • You can set a separate downloadable URL if you want your visitors to download some file when viewing the map. URL has to be provided manually.
  • Thumbnail carousel is displayed below the maps. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix maps with other content types in the same lightbox.

Live example

Click the button below to see how it works with IFRAMEs.

Features:

  • Google maps are recommended, but you can use other services if they support IFRAMEs.
  • You can use one of the 3 lightbox layouts with IFRAMES.
  • You can set a separate downloadable URL if you want your visitors to download some file when viewing the IFRAME content. URL has to be provided manually.
  • Thumbnail carousel is displayed below the IFRAMES. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix IFRAMEs with other content types in the same lightbox.

Live example

Click the button below to see how it works with the content loaded with AJAX.

Features:

  • Google maps are recommended, but you can use other services if they support IFRAMEs.
  • You can use one of the 3 lightbox layouts with IFRAMES.
  • You can set a separate downloadable URL if you want your visitors to download some file when viewing the IFRAME content. URL has to be provided manually.
  • Thumbnail carousel is displayed below the IFRAMES. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix IFRAMEs with other content types in the same lightbox.

Live example

Click the button below to see how it works with HTML content entered manually.

Features:

  • Google maps are recommended, but you can use other services if they support IFRAMEs.
  • You can use one of the 3 lightbox layouts with IFRAMES.
  • You can set a separate downloadable URL if you want your visitors to download some file when viewing the IFRAME content. URL has to be provided manually.
  • Thumbnail carousel is displayed below the IFRAMES. You need to set thumbnails manually.
  • You can open the lightbox using the built-in gallery (like in an example above) or by linking to it with the url #reactbox-<reactbox-id>
  • You can mix IFRAMEs with other content types in the same lightbox.