How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

NextGEN Pro Lightbox

NextGEN Pro Lightbox is a premium lightbox effect that displays your images full screen on home computers, as well as all mobile devices. You also have the option within this lightbox to comment on images, and share the image to popular social websites.

Lightbox Effect Screenshot, a photo of a girl smiling.

HOW TO TURN ON NEXTGEN PRO LIGHTBOX

If you have purchased and installed NextGEN Pro, go to Gallery >> Other Options > Lightbox Effects, and select 'NextGEN PRO Lightbox' & save changes.

It shows how to enable the NextGEN Pro Lightbox Effect

For information about how the option "What must the lightbox be applied to?" works, please open this link https://www.imagely.com/docs/lightbox-effects/

NEXTGEN PRO LIGHTBOX EFFECTS SETTINGS

COLOR OPTIONS

Color theme

You can choose between three different color themes for our NextGEN Gallery Pro Lightbox Effect. Find the option under Gallery > Other Options >  Lightbox Effects > Color Options > Color theme.

Setting to change or adjust the color theme of NextGEN Gallery Pro Lightbox Effect

 

Default: a dark theme.
 
Default theme, a dark lightbox and a dark gray sidebar
 

All white: A white-based theme.
 
All white color theme, sidebar and lightbox are both white, icons and text are dark gray.
 

All black: Removes borders from the comments panel.
 
Dark theme, everything is black, icons and text are light gray
 

Custom Colors

You can also adjust individually some of the Lightbox areas.

Shows different areas of the lightbox that you can adjust, colorwise

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

Shows different areas of the lightbox that you can adjust, colorwise, icons

  1. Carousel text color.
  2. Floating elements color.
  3. Icon color. 

Background color icons on the carousel could be adjusted as well.

  1. 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.

Background carousel color settings

LIGHTBOX AND IMAGE SIZING

  • Lightroom padding: Increase the padding around the Lightbox Effect. By default it is set to 0px.
    In this example, we set the padding to 15 px.
     
    Shows a padding of 15 pixels
     
  • Crop Image Display: There are multiple options in this setting:
      • Images will be scaled to fill the display, centered and cropped.
      • Images will be scaled down until the entire image fits (default).
      • Images will scale to fill the height of the display.
      • Images will scale to fill the width of the display.
      • Landscape images will fill the display, but scale portraits to fit.

     

  • Pan Cropped images: When enabled images can be panned with the mouse. That sometimes is only visible if you adjust the Crop Image Display setting.
     
    Panned functionality working.
     

SOCIAL

  • Enable Comments: When it is set to "Yes", the lightbox effect will display the comment icon. Once you click on that icon it will display a comment area on the sidebar.
     
    How to open the comment sidebar area
     
  • Display comments initially: When on the commenting sidebar will be opened at startup.
  • Enable sharing: When enabled social-media sharing icons will be displayed.
     
    Share icons available next to the title and description of the photo: twitter, facebook, pinterest
     
  • Facebook App ID: Please leave it blank - this method is deprecated by now
  • Enable Twitter Cards: A Twitter's username is required for Twitter Card analytics.

THUMBNAIL CAROUSEL

  • Display carousel initially: When disabled the navigation carousel will be docked and hidden off screen at startup.
     
    Carousel is hidden, a visible toggle element.
     
  • Display Captions initially: When on the captions toolbar will be opened at startup.
     
    Display captions initially show the description and title of the photo.
     
  • Display carousel thumbnails: Large galleries can impact performance on mobile devices, you can disable those thumbnails to reduce page load times.
    • Always display thumbnails.
    • Never display thumbnails.
    • Only on desktop browsers.Note: regardless of those settings the plugin hides the carousel if it isn't wide enough to display at minimum three images. That prevents display on most cell phones in portrait mode but thumbnails should be visible in landscape and tablets if you use the option "Always display the carousel".

ECOMMERCE

  • Display cart initially: When on the cart sidebar will be opened at startup. If the "Display Comments" option is also on the comments panel will open instead.

Ecommerce sidebar

TRANSITION EFFECTS

Transition effect Slides the images depending on image position.

  • Transition effect: You can choose between these options:
    • Crossfade betweens images.
    • Slides the images depending on image position.
    • Quickly removes the image into background color, then fades the next image.
    • Slides the images depending on image position.
    • Fade between images and slide slightly at the same time.
  • Transition speed: Measured in seconds.
  • Slideshow speed: Measured in seconds.
  • Pause on interaction: When enabled image display will be paused if the user presses a thumbnail or any navigational link.

OTHER SETTINGS

  • Enable browser routing: Necessary for commenting to be enabled.
  • Router slug: Used to route JS actions to the URL. You can define your own slug, but by default, it's set to gallery.
     
    visible lightbox slug in the photo url
     
  • Localize limit: For performance gallery images are localized as javascript,  this limit will make an AJAX call to load the rest at startup. Set to 0 to include every image in displayed galleries (by default is set to 100).
Table of Contents
Close Menu