How to Use Torchbox Lightbox for WordPress

How to Use the Torchbox Lightbox for WordPress?

This is a simple guide for beginner users of Torchbox Lightbox for WordPress.


After you activated the plugin, your images and WordPress galleries should have lightboxes on them right away.
Torchbox automatically adds lightboxes and detect the high resolution versions of the following:
  • Images placed using the Add Media button that link to the Media File
  • Galleries placed using the Add Media button then Create Gallery link, and with the gallery setting "Link To" set to Media File or Attachment Page
  • Visual Composer Single Image elements that link to their larger image

Captions entered in the Media Manager window while editing your images or galleries will be placed inside the lightbox. Reminder: do not enter your captions in the field for Alternative Text, this is different from captions. Alternative text serves as text shown when the browser is unable to load the image and is not normally visible within a webpage.

If you have other images which are not detected and you would like for them to also have a lightbox, you can head over to the Torchbox settings in Settings > Torchbox then check the option Apply Torchbox to images that are not linked into their high resolution versions.

You can also check out the Advanced Settings near the bottom of the Torchbox settings page for more lightbox application methods and for options regarding its behavior and styling.


How It Works

When a Torchboxed image is clicked on, it will pop out of its place and grow into a larger version to occupy almost the entire screen. If there's a caption, Torchbox hides this and displays this instead as an overlay in the lightbox.

At this stage, the low resolution image is shown and the high resolution version of it will start loading. When the high resolution image finishes loading, it will swap out the low one with it.

If there are other Torchboxes in the page, left & right navigational buttons will be overlain in the lightbox for easy switching.

Clicking on the lightbox will close it, and the image will shrink back and move to its original size and position. If you have navigated to another lightbox using the left & right buttons, the lightbox will fade out instead.


How it Works in Mobile

In our opinion, we do not think that lightboxes should exist in mobile devices. Mainly because the screen is small, and showing a high resolution image the normal "lightbox" way wouldn't be impressive.

Torchbox handles things differently in mobile devices. Images that would otherwise have a lightbox in a desktop would instead link to the high resolution image.

In the Torchbox settings in Settings > Torchbox, you can opt to disable this behavior so that the image would not do anything when tapped on. You can also set the Mobile Width which will indicate when to switch to this type of behavior.