Lightbox

05/05/2019

Lightbox is an Avada option that allows you to open beautiful, responsive overlay windows, containing images or videos. In Avada version 3.8, we replaced the PrettyPhoto lightbox with iLightbox. Below you’ll find a detailed description on each Fusion Theme Option available for the Lightbox, as well as the Lightbox Skins, the Lightbox Element, and the other elements that utilize the lightbox.

IMPORTANT NOTE
iLightbox is only available for Avada versions 3.8 or higher. Older versions will continue to use PrettyPhoto. Once older versions are updated to 3.8 or higher, Avada will automatically use the new Lightbox.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Overview

Lightbox Theme Options

The Global Lightbox Options are found in the theme options at Avada > Theme Options > Lightbox. These options affect the way Lightbox works across the site.

Lightbox – Allows you to enable or disable the lightbox across your site. Choose between On or Off.

Lightbox On Single Posts Pages – Allows you to enable or disable the lightbox on single blog and portfolio pages. Choose from On or Off.

Lightbox Behavior – Allows you to set what the lightbox will display for portfolio and blog posts. Choose between First Featured Image of Every Post, or Only Featured Image of Individual Post.

Lightbox Skin – Allows you to set a lightbox skin. Choose between Light, Dark, Mac, Metro Black, Metro White, Parade or Smooth. See below for examples of the various skins.

Thumbnails Position – Allows you to set the position of the thumbnails in the lightbox. Choose between Right or Bottom.

Animation Speed – Allows you to set the animation speed. Choose between Fast, Slow or Normal.

Arrows – Allows you to enable or disable navigation arrows. Choose from On or Off.

Gallery Start/Stop Button – Allows you to enable or disable the gallery start/stop button. Choose from On or Off.

Autoplay The Lightbox Gallery – Allows you to enable or disable the lightbox gallery’s autoplay feature. Choose from On or Off.

Slideshow Speed – Allows you to enter a numerical value that sets the slideshow speed if the ‘Autoplay The Lightbox Gallery’ option is enabled. For example, 1000 = 1 second.

Background Opacity – Allows you to enter a numerical value that sets the background opacity. For example, 0.00 (transparent) or 1.00 (opaque).

Title – Allows you to enable or disable image titles in the lightbox. Choose from On or Off.

Caption – Allows you to enable or disable the image captions in the lightbox. Choose from On or Off.

Social Sharing – Allows you to show or hide the social sharing button on the images in the lightbox. Choose from On or Off.

Deeplinking – Allows you to enable or disable deep linking image in the lightbox. Choose from On or Off.

Show Post Images In Lightbox – Turn on to display post images in the lightbox that are inside the post content area. Choose from On or Off.

Slideshow Video Dimensions – Accepts a pixel value that lets you control the width and height of videos inside the lightbox. For example, 600px.

Fusion Theme Options - Lightbox

Lightbox Skins

The Lightbox comes with a choice of seven skins – Light, Dark, Mac, Metro Black, Metro White, Parade, & Smooth. These are set in the Theme Options at Avada > Theme Options > Lightbox > Lightbox Skin. You can see an example of each style below.

Light

Lightbox Skin - Light

Dark

Mac

Lightbox Skin - Mac

Metro Black

Lightbox Skin - Metro Black

Metro White

Lightbox Skin - Metro White

Parade

Lightbox Skin - Parade

Smooth

Lightbox Skin - Smooth

Lightbox Element

The Lightbox Element is added through the Fusion Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here. For full details on the Lightbox Element, please follow the link below.

View the Lightbox Element Documentation!

Other Elements With Lightbox Options

Image Element

In the Image Element, you can choose to upload and display an image in a lightbox, different from the image you choose to display inside the Image Frame. To enable that, simply select Yes on the Image Lightbox option. To upload a different display image to display on the lightbox, click the Upload button in the Lightbox Image field and select an image from your Media Library or upload a new one. You can also add images added via the Image Element to a Lightbox Gallery by linking them with the same Gallery ID.

Image Element - Lightbox Option
View the Image Element Documentation!

Image Carousel Element

In the Image Carousel Element, you can choose to display your images in a lightbox. To display images in a lightbox, simply select Yes on the Image Lightbox option.The Image Carousel Element will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the carousel thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.

Image Carousel Element - Lightbox Option
View the Image Carousel Element Documentation!

Gallery Element

The Gallery Element uses the lightbox by default. The Gallery will display your images in the Lightbox at the size they are uploaded. Avada uses an appropriate sized image for the gallery thumbnails. For more information on this, please see the How Avada Controls Responsive Images doc.

Gallery Element - Lightbox Option
View the Gallery Element Documentation!

Post Slider Element

In the Post Slider Element, you can choose to display images in a lightbox, only if the Post Slider is set to the Attachment layout. To enable that, select Yes on the Lightbox on Click option.

Post Slider Element - Lightbox Option
View the Post Slider Element Documentation!

Slider Element

In the Slider Element, you can choose to display your slider images in a lightbox. To enable that, select Yes to the Lightbox option in each slider item tab.

Slider Element - Lightbox Option
View the Slider Element Documentation!

Page Options for Portfolio Pages

When editing portfolio pages, you can add a YouTube or Vimeo video to a lightbox. Enter the URL of the video in the Youtube/Vimeo Video URL for Lightbox field located in the Fusion Page Options > Portfolio section.

Portfolio Page Options - Lightbox Option