Documentation: Pro Lightbox

Getting started

DOWNLOAD AND LICENSE. You can purchase LightPress Pro from this website or from your WordPress admin area under the “Lightbox” menu item. In either case, you will immediately receive an email with a download link and a license.

Download the plugin zip file, and upload that zip file from your websites Plugin page. When you activate the plugin, you will be taken to a screen where you can copy in the license from your email. If you ever need to change or re-add your license, there is a link to the license screen on the main Plugins screen. Just scroll down to this plugin in the list, and look at the small links below the plugin name.

CHOOSE LIGHTBOX. To enable the Pro Lightbox, select ‘Pro Lightbox’ from Choose Lightbox drop down on the Lightbox settings screen. Save. All your images should immediately open in the new Pro Lightbox.

Plugin Settings

Plugin settings live under “Lightbox” on the main dashboard menu. You will only see Pro Lightbox options when you have the Pro Lightbox selected as your lightbox.

There are several groups of settings.

  • ENABLE. This section allows you to enable the lightbox for your desired media types: images, video, PDFs, maps, and inline content for modals and popups.
  • APPEARANCE FOR IMAGE LIGHTBOX. This contains settings for the general appearance of the lightbox when viewing images and galleries of images. There is a light theme and dark theme for colors, but you can also set custom colors. There are a wide range of other self-explanatory options
  • TOOLBAR FOR IMAGE LIGHTBOX. This contains settings for the ‘toolbar’ when viewing images. This is the area at the top of the lightbox that has buttons to view thumbnails, zoom images, and close the lightbox. Again, settings should be self explanatory.
  • APPEARANCE FOR VIDEO / PDF / MAP / MODAL LIGHTBOX. The Pro lightbox allows you to open other media besides images. When opening non-image media, the lightbox has a different style, and this section contains settings for customizing that style.
  • THIRD PARTY INTEGRATIONS. This contains settings that will mostly enable the lightbox for images added via third party plugins like gallery plugins and block plugins. For now, it contains support for various Elementor blocks. We’ll soon be releasing support for many popular gallery plugins. We are looking at adding support for Woocommerce product images, but that’s on a longer roadmap.

Working with Images

AUTODETECT. Be sure to enable “Autodetect Images” on the Lightbox settings screen.

The Block Editor: Image and Gallery Blocks

Upon activation, all images in Image or Gallery blocks in the block editor will open in the lightbox automatically. It is simple and immediate.

OPEN ALL IMAGES VS IMAGES WITH LINKS. By default, the Pro Lightbox will open all images added via Image and Gallery blocks automatically. If you only want to open images that are explicitly set to “Link to Media File” you can set that option from the plugin settings page.

GALLERIES ARE AUTOMATICALLY GROUPED. Images added via gallery blocks are automatically grouped separately from any other images on the page. So if you click on an image in a gallery, only images in that gallery will open in the current lightbox. Images added individually as single images will open as single images even if there is another gallery on the page.

DISABLING FOR SINGLE IMAGES. You can disable the lightbox for individual images blocks by going to Block Settings > Advanced > CSS, and giving the block a class of nolightpress .

Working with Videos

The Pro Lightbox will open links to Youtube, Vimeo, VideoPress, DailyMotion, and self-hosted videos. Here’s how to do it:

  1. Enable ‘Autodetect Videos’ in the Lightbox settings.
  2. Grap a link to a video, like https://www.youtube.com/watch?v=zqRnCgKUEFo or https://vimeo.com/181645979.
  3. Text link example: add a paragraph block, add some text like ‘Open Video’, select the text and set it to link to the url you copied in step 1. That’s it. If you go to the frontend and click the link the video will open in a lightbox.
  4. Image placeholder example: add an Image block. Make the image link the url you copied in step 1. That’s it. If you go to the frontend, and click on the image, the video will open in the lightbox.

ADDING HTML. You can also add video links via HTML. For example, the following code added via an HTML block produces the working links below.

<a href="https://www.youtube.com/watch?v=zqRnCgKUEFo">Open Youtube Video</a><br>
<a href="https://vimeo.com/181645979">Open Vimeo Video</a>
Open Youtube Video
Open Vimeo Video

Working with PDFs

The Pro Lightbox will open links to PDF files:

  1. Enable ‘Autodetect PDFs’ in the Lightbox settings.
  2. Upload your PDF to the media library or group a publically accessible link to a PDF file.
  3. Add a paragraph block, add some text like ‘Open PDF’, select the text, and set it to link to the url you copied in step 1. That’s it. If you go to the frontend and click the link the PDF will open in a lightbox.

HTML. You can also add PDF links via HTML. For example, the following code added via an HTML block produces the working link below. The link is to a nice JavaScript cheat sheet from the iLoveCoding blog.

<a href="https://lightpress.io/wp-content/uploads/2024/07/js-cheatsheet.pdf">Open PDF</a>
Open PDF

Working with Google maps

For Google Map links:

  1. Enable ‘Autodetect Maps’ in the Lightbox settings.
  2. Go to maps.google.com and search for the map location you want. You can adjust the zoom level and other maps settings. Copy the links from your web browser when ready.
  3. Add a paragraph block, add some text like ‘Open Map’, select the text, and set it to link to the url you copied in step 1. That’s it. If you go to the frontend and click the link the PDF will open in a lightbox. Obviously, you an also add an image and link that to the map URL and clicking the image will open the map.

HTML. You can also add Google map links via HTML. For example, the following code added via an HTML block produces the working link below to a map of beautiful Boulder, Colorado.

<a href="https://www.google.com/maps/place/Boulder,+CO/@40.0292807,-105.3223783,12z/data=!3m1!4b1!4m6!3m5!1s0x876b8d4e278dafd3:0xc8393b7ca01b8058!8m2!3d40.0149856!4d-105.2705456!16zL20vMG5jajg?entry=ttu">Open Map</a>
Open Map

Open other websites in Lightbox

Linking to third party websites with iframes will not always work. Many websites have content security policies that do not allow it. For websites that do allow it, you can open a third party website in a iframe like this:

  1. Enable ‘Autodetect Iframes’ in the Lightbox settings.
  2. Get a link to the site you want to open, like https://en.wikipedia.org/wiki/WordPress.
  3. Add a paragraph block, add some text like ‘Learn about WordPress’, select the text, and set it to link to the url you copied in step 1. That’s it. If you go to the frontend and click the link the PDF will open in a lightbox.
  4. Go to the block settings under Advanced and add the css class lightpress-iframe.

HTML. Below is how you would do this via HTML.

<a href="https://en.wikipedia.org/wiki/WordPress" class="lightpress-iframe">Learn about WordPress</a>
Learn about WordPress

Create Modals or popups

Creating modals and popups requires that you have a Pro or higher plan. The modal functionality is not included in the ‘Basic’ paid plan, which is just for the image lightbox. Assuming you do have a Pro plan, to create a modal on page using the Block editor, do the following:

  1. Enable “Autodetect Inline Content” in your Lightbox settings.
  2. CREATE YOUR MODAL CONTENT.
    • On any page, add a Group block. In the block settings, go to Advanced, and give the Group block a unique HTML anchor like uniqueID. Also give it a CSS class of lightpress-hidden. Adding the CSS class will ensure that your modal content is hidden on the front page until a user opens the lightbox.
    • Fill the group block with any content you want – headings, paragraphs, images, buttons, forms. Any content, formatting, and styling you apply via the block editor will be honored when the modal is open. For example, you can add padding around all your content, or margin between elements, or colors.
  3. CREATE A LINK TO OPEN THE MODAL.
    • Add a paragraph block, add some text like ‘Open Modal’, select the text, and set it to link to the HTML anchor you set on your Group block above. When you set the link, you’ll just add something like #uniqueID instead of a url in the link field.
    • In the paragraph block settings, go to Advanced and add a CSS class of lightpress-inline.
    • That’s it. If you go to frontend, and click the link, it will open the lightbox with the modal content you added above.
  4. OTHER TIPS.
    • USE ANY CONTAINER – LIKE KADENCE ROW BLOCKS. Instead of a Group block, you can use any other kind of container in step one. For example, the modal examples on this website are set up using Kadence row blocks. Whatever container you add, you just add the HTML anchor and CSS class above in the same way.
    • USE TEMPLATE PARTS AND THE SITE EDITOR TO ADD MODALS SITE WIDE. Instead of creating your modal on a particular page, you can add the modal and links within, say, the Footer template in the site editor. The modal will then load on every page of the site.

As an example, just below, I’ve added a paragraph block with the text “Open Modal”. I set it to link to #uniqueID and gave it the lightpress-inline class. Just below that, I created a group block (which ou cannot see) containing a single paragraph block saying “This is a modal”. It has the lightpress-hidden class and has uniqueID as its anchor. Click the link to see it open.

Here’s the markup for both blocks as generated by the block editor. If you copy the code below, go to the block editor, add a paragraph block and immediately copy this code, you should get a working modal.

<!-- wp:paragraph {"className":"lightpress-inline"} -->
<p class="lightpress-inline"><a href="#uniqueID">Open Modal</a></p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"lightpress-hidden","layout":{"type":"constrained"}} -->
<div id="uniqueID" class="wp-block-group lightpress-hidden"><!-- wp:paragraph -->
<p>This is a modal.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Open Modal

This is a modal.

Third Party Integrations

ELEMENTOR. You can set the lightbox to open images added via various Elementor blocks. Just enable those options in Lightbox settings.

OTHERS. We’ll soon be adding similar settings to open images in other popular gallery and block plugins, as well as Woocommerce product images.

Support & feature Requests

If you are on Basic paid plan, please us the WordPress.org support forums. That plan includes the Pro Lightbox for images but does not include Pro support.

If you are on a Pro or higher plan, please send a note via our Contact form. During the week, you can expect same day responses directly from our dev team. We’ll often respond on the weekends as well. We also take any feature requests from Pro members quite seriously – if a request is doable and likely to be of general interest, we will usually act on it.