Lightbox

Lightbox controls the default behavior and appearance of image lightboxes across Creative Elements. You can enable or disable the lightbox, choose which controls are available, define the title and description sources, and customize the lightbox colors, shadows, and icon sizes.

Tip: Use the global Lightbox settings to keep image previews consistent across the website instead of styling each image interaction separately.
Lightbox settings
Image Lightbox

Enable or disable the global image lightbox. When enabled, links that point directly to image files can open in a lightbox popup.

The default setting is On.

Counter

Show or hide the image counter in the lightbox when multiple images are available.

The default setting is On.

Fullscreen

Show or hide the Fullscreen control in the lightbox toolbar.

The default setting is On.

Zoom

Show or hide the Zoom control in the lightbox toolbar.

The default setting is On.

Title

Choose which image metadata is displayed as the lightbox title.

None
Do not display a title.
Title
Use the image Title. This is the default option.
Caption
Use the image Caption.
Alt
Use the image Alt text.
Description
Use the image Description.
Description

Choose which image metadata is displayed as the lightbox description.

None
Do not display a description.
Title
Use the image Title.
Caption
Use the image Caption. This is the default option.
Alt
Use the image Alt text.
Description
Use the image Description.
Colors and Shadow
Background Color
Set the background color behind the enlarged image.
UI Color
Set the default color of the lightbox interface controls.
UI Hover Color
Set the color of interface controls when hovered.
Text Color
Set the color of lightbox text, including the title and description.
Box Shadow
Add and configure a shadow around the displayed lightbox image.
Icon Sizes
Toolbar Icons Size
Set the size of icons in the lightbox toolbar. Available units are px, em, rem, vw, and custom values.
Navigation Icons Size
Set the size of the previous and next navigation icons. Available units are px, em, rem, vw, and custom values.

Image Lightbox

Image Lightbox controls whether image links can open inside the Creative Elements lightbox instead of navigating directly to the image file.

The setting is enabled by default. When active, the lightbox automatically works on supported links that lead to image files.

Good to know: The global setting controls the default lightbox behavior. Individual widgets or links can still have their own interaction settings where supported.

Counter

Counter controls whether the lightbox displays the current image position when browsing a group of images.

For example, a gallery may show a value such as 2 / 6 to indicate that the second image out of six is currently open.

Fullscreen

Fullscreen controls whether visitors can expand the lightbox to fill the available screen area.

When disabled, the Fullscreen control is removed from the lightbox interface.

Zoom

Zoom controls whether visitors can zoom the displayed image from the lightbox toolbar.

When disabled, the Zoom control is hidden.

Title and Description

The lightbox can display image metadata as a Title and a Description. Both settings can independently use the image Title, Caption, Alt text, or Description, or be disabled entirely.

By default:

  • Title uses the image Title.
  • Description uses the image Caption.
Tip: Use metadata fields consistently in your Media Library. If captions are intended for visitors and Alt text is primarily written for accessibility, using Caption as the lightbox description usually keeps those roles clearer.

Background Color

Background Color sets the color of the lightbox overlay behind the enlarged image.

A darker or semi-transparent background can help the image stand out from the page underneath.

UI Color

UI Color defines the default color of the lightbox interface controls, such as toolbar and navigation icons.

Choose a color with enough contrast against the lightbox background so the controls remain easy to identify.

UI Hover Color

UI Hover Color defines how interface controls change when the visitor hovers over them.

Tip: A visible difference between UI Color and UI Hover Color makes interactive controls easier to recognize.

Text Color

Text Color controls the color of the lightbox text, including the displayed title and description.

Make sure it remains readable against the selected Background Color.

Box Shadow

Box Shadow adds a shadow around the enlarged lightbox image. This can help visually separate the image from the overlay background.

Use subtle values when possible so the shadow supports the image instead of becoming a dominant visual effect.

Toolbar Icons Size

Toolbar Icons Size controls the size of icons in the lightbox toolbar. It is responsive, so separate values can be set for desktop, tablet, and mobile.

Available units are px, em, rem, vw, and custom values.

Navigation Icons Size

Navigation Icons Size controls the size of the previous and next navigation icons used when browsing multiple lightbox items.

This setting is also responsive and supports px, em, rem, vw, and custom values.

Tip: Check icon sizes on mobile separately. Navigation controls that look balanced on desktop may feel too large or too small on a narrow screen.

Recommended workflow

  1. Decide whether image links should open in the global lightbox.
  2. Choose whether Counter, Fullscreen, and Zoom controls are needed.
  3. Select the metadata sources used for the Title and Description.
  4. Set the Background Color.
  5. Configure UI Color and UI Hover Color with sufficient contrast.
  6. Set the Text Color for readable titles and descriptions.
  7. Add a Box Shadow if the image needs stronger separation from the overlay.
  8. Adjust Toolbar Icons Size and Navigation Icons Size for each responsive device.
  9. Test both single images and galleries on desktop and mobile.
© WebshopWorks - Professional PrestaShop Addons