Customizing JupiterX Lightbox

Lightboxes are a sleek way to display images, galleries, videos, and carousels on your website. They allow users to view media content without navigating away from the current page, creating an immersive experience. JupiterX incorporates a mobile-responsive lightbox feature by default, but it also provides flexibility if you need to adjust the setup or styling to better match your site's design. Below is a detailed guide on how to tailor JupiterX lightboxes to your needs.

Accessing Lightbox Settings

Follow these steps to configure your global lightbox settings:

  1. Open any page or post with Elementor.
  2. Click the Site Settings icon, located in the upper left corner of the Widget Panel.
  3. Navigate to Site Settings > Settings > Lightbox.

Within the Lightbox tab, you’ll find a range of settings that enable you to fine-tune how your lightbox functions and appears.

Global Lightbox Settings

Here are the settings that you can customize globally for lightboxes:

  • Image Lightbox: Toggle to enable or disable lightbox functionality across the site.
  • Counter: For galleries only. Turning this on will add an image count in the upper left corner of the lightbox.
  • Fullscreen: Enables an icon for visitors to view the image in fullscreen mode within the lightbox.
  • Zoom: Allows visitors to zoom in on images within the lightbox, with the capability to pan over zoomed-in images.
  • Share: Provides sharing options for social media and download functionality.
  • Title and Description: Display titles and/or descriptions under the image in the lightbox, choosing from various metadata such as Title, Caption, Alt text, or Description.
  • Background Color: Customize the background color and opacity for the lightbox.
  • UI Color: Determine the default color for the lightbox navigation arrows, dots, and the Close button.
  • UI Hover Color: Set the hover color for the aforementioned UI elements.
  • Text Color: Choose the color for any text within the lightbox.
  • Toolbar Icons Size: Adjust the size of toolbar icons like Zoom, Share, Fullscreen, and Close.
  • Navigation Icons Size: Modify the size of navigation icons for moving to the next or previous image.

These custom settings ensure that your lightbox popup windows maintain a consistent look and feel that's aligned with your brand identity.

Image Lightbox Specifics

The Image Lightbox feature works seamlessly with any image link pointing to an image file. Here’s how to configure it for individual images:

  1. In the Elementor editor, drag the Image widget onto the page.
  2. Select an image and set the Link to option to 'Media file'.
  3. Once set, a ‘Lightbox’ option will appear, letting you override the default setting with 'Yes' or 'No'.

By selecting 'Media file', the lightbox feature activates, defaulting to the status established in the Elementor settings. You can also individually set each image to enable or disable the lightbox feature as required.

Previewing Lightbox Changes

To view your changes live:

  1. Set the Lightbox dropdown to 'Yes' for the chosen image.
  2. Click the image within the Elementor editor to preview the lightbox functionality.

These adjustments are conducive to providing visitors with a predictable yet sophisticated way to engage with your site's visual elements, whether they're browsing on desktop or mobile devices.

By configuring these global and individual settings, you optimize the aesthetics and user experience, providing a streamlined viewing process for your site’s visuals. These settings ensure high performance and responsive interaction across all devices, thereby enhancing your website's professional appeal.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.