How to Use the Pro Lightbox

The Pro Lightbox is a premium lightbox effect that displays images full screen on desktop and mobile devices. Users can comment on images and share them on social media within the lightbox.

How to enable the Pro Lightbox

To enable this feature, go to Imagely > Settings > Lightbox Effects. In the Lightbox Configuration section, set the lightbox effect to NextGEN Pro Lightbox, then save changes.

For details on the Lightbox Context option (its help text reads “What must the lightbox be applied to?”), see the lightbox effects guide. 

Pro Lightbox Effect Settings

All of the settings below appear in the Imagely > Settings > Lightbox Effects tab once NextGEN Pro Lightbox is selected. Each group is a collapsible section on that page.

Color options

Three color theme options are available under Imagely > Settings > Lightbox Effects > Color options > Color theme:

All black: Removes borders from the comments panel

Default: A dark theme with dark gray sidebar

All white: White-based theme with dark gray icons and text

Default: a dark theme.

All white: A white-based theme.

All black: Removes borders from the comments panel.

Custom Colors

You can also adjust individually some of the Lightbox areas.

1. Background Color
2. Sidebar background color
3. Sidebar button text color
4. Sidebar button background
5. Carousel background color

6. Carousel text color
7. Floating elements color
8. Icon color

9. Display carousel icons: By default it us set up to “No”, but if you change that setting to “Yes”, you can adjust the background of the icons. You can also make them look round like the screenshot above.

Lightbox and Image Sizing

• Lightbox padding: Increase padding around the lightbox (default: 0px). A Padding unit control sets the unit.
  

  

• Crop images: Multiple scaling options including:

  • Scale to fill and crop centered
  • Scale down until entire image fits (default)
  • Scale to fill display height
  • Scale to fill display width
  • Landscape fills display; portraits scale to fit

• Pan cropped images: Enable mouse panning when images are cropped
  

  

Social

• Enable comments: Displays comment icon and sidebar area
  

  

• Display comments initially: Opens commenting sidebar at startup
• Enable sharing: Shows social media sharing icons (X (Twitter), Facebook, Pinterest)
  

  

• Facebook App ID: Leave blank (deprecated method)
• Enable Twitter Cards: Requires a Twitter username for analytics

Thumbnail Carousel

• Display carousel initially: When disabled, navigation carousel is hidden at startup
  

  

• Display captions initially: Opens captions toolbar showing image title and description
  

  

• Display carousel thumbnails: Options include:
  • Always display thumbnails
  • Never display thumbnails
  • Only on desktop browsers (Note: plugin hides carousel if too narrow for minimum three images)

Ecommerce

• Display cart initially: Opens cart sidebar at startup (comments panel opens instead if enabled)

Transition Effects

Transition effects

• Transition effect: Choose from crossfade, slide, remove background then fade, or fade with slight slide
• Transition speed: Measured in seconds
• Slideshow speed: Measured in seconds
• Pause on interaction: Pauses display when user interacts with thumbnails or navigation

Other Settings

• Enable browser routing: Required for commenting functionality
• Router slug: Routes JS actions to URL (default: “gallery”)
  

  

• Localize limit: Performance setting for JavaScript image loading (default: 100; set to 0 to include all images)