iLightbox

03/13/2017
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 iLightbox.

The revolutionary iLightbox replaced the PrettyPhoto lightbox in Avada version 3.8. Below you’ll find a detailed description on each Fusion Theme Option available for the lightbox, as well as the Lightbox element and the other elements that utilize the lightbox.

Lightbox Theme Options

To access these options, Navigate to Avada > Theme Options > Lightbox.

Lightbox – Illustrated as A, this option lets you enable or disable the lightbox. Choose between On or Off.

Lightbox On Single Posts Pages – Illustrated as B, this option lets you enable or disable the lightbox on single blog and portfolio pages. Choose from On or Off.

Lightbox Behavior – Illustrated as C, this option lets you 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 – Illustrated as D, this option lets you set a lightbox skin. Choose between Light, Dark, Mac, Metro Black, Metro White, Parade or Smooth.

Thumbnails Position – Illustrated as E, this option lets you set the position of the thumbnails in the lightbox. Choose between Right or Bottom.

Animation Speed – Illustrated as F, this option lets you set the animation speed. Choose between Fast, Slow or Normal.

Arrows – Illustrated as G, this option lets you enable or disable navigation arrows. Choose from On or Off.

Gallery Start/Stop Button – Illustrated as H, this option lets you enable or disable the gallery start/stop button. Choose from On or Off.

Autoplay The Lightbox Gallery – Illustrated as I, this option lets you enable or disable the lightbox gallery’s autoplay feature. Choose from On or Off.

Slideshow Speed – Illustrated as J, this option lets you 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 – Illustrated as K, this option lets you enter a numerical value that sets the background opacity. For example, 0.1 (transparent) or 1 (opaque).

Title – Illustrated as L, this option lets you enable or disable image titles in the lightbox. Choose from On or Off.

Caption – Illustrated as M, this option lets you enable or disable the image captions in the lightbox. Choose from On or Off.

Social Sharing – Illustrated as N, this option lets you show or hide the social sharing button in the lightbox. Choose from On or Off.

Deeplinking – Illustrated as O, this option lets you enable or disable deep linking image in the lightbox. Choose from On or Off.

Show Post Images In Lightbox – Illustrated as P, this option lets you show or hide post images that are inside the post content area of the lightbox. Choose from On or Off.

Slideshow Video Dimensions – Illustrated as Q, this option accepts a pixel value that lets you control the width and height of videos inside the lightbox. For example, 600px.


Lightbox Element Options

These are the element options for the Lightbox Element 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 Content Based Elements here.

Content Type – Illustrated as A, is where you set the type of content your Lightbox is displaying. You can choose from a normal image or a Vimeo/YouTube video.

Full Image – Illustrated as B, this option lets you upload an image to display.

YouTube or Vimeo Video URL – Illustrated as C, you’ll add your desired video source URL here. Be sure to use the video URL and not the embed URL here.

Thumbnail Image – Illustrated as D, this option lets you upload a thumbnail image. Clicking this image will open the lightbox.

Alt Text – Illustrated as E, this option lets you enter alternative text in case the full image cannot be displayed.

Lightbox Description – Illustrated as F, this option lets you enter a description for the lightbox. This will appear when hovering your mouse cursor over the thumbnail image.

CSS Class – Illustrated as G, use this to add a class to the wrapping HTML element.

CSS ID – Illustrated as H, use this to add an ID to the wrapping HTML element.


Other Lightbox Options

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.


Image Frame Element

In the Image Frame 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.


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.


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.


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.


6 Likes
Proudly Serving Over 390000 Satisfied Users!