Styling the lightbox

Important steps to style your Lightbox

 

Styling the lightbox

The only attributes that can be styled

Lightbox controls

 

  


Styling the lightbox

  1. Open the Fluid Info & Lightbox page in your project.
    • Don't have the Fluid Info & Lightbox page yet, Click Here to see where to get it from.
    • fl10.jpg
  2. Select the lightbox part you would like to edit and apply the styling, it will automatically be applied to the gallery.
    •   
    • fl14.jpg

 

Do not reposition the objects in the Lightbox.
Do not remove the objects from the lightbox.
Do not style the attributes that cannot be styled. See the next step to see what  attributes can be styled

 


These are the only attributes that can be styled in the Lightbox 

 

Top Icons

  • Size (Width & Height)
  • Background image
  • Background size
  • Background color

Next & previous Buttons

  • Background image
  • Background color
  • Size (Width & Height)
  • Margin
  • Border-radius

Loading Bar

  • Height
  • Background color

Trigger (Quick view thumbnails trigger)

  • Background image
  • Size (Width & Height)
  • Background color

Thumbnails

  • Width & Height (Apply only to one of the two)
  • Border-radius
  • Right Margin

Thumbnails Background

  • Background color
  • Top Padding
  • Bottom Padding

 


Lightbox controls

Lightbox controls are located at the Fluid Info & Lightbox. Type 0 or 1 in the buttons control text fields

 

1 = Active

0 = Inactive

 

Buttons

  • fl15.jpg
  • Close The lightbox close button
    Download The download button allows users to download the item in the lightbox
    Autoplay Atuplay the images in the lightbox
    Fullscreen Fullscreen button in the lightbox
    Zoom Zoon in and Zoom out buttons in the lightbox
    Actual Size Shows the actual size of the image (if the image is zoomed) 
    Share Allows users to share the item on social media

 

Quick View thumbnails

  • fl16.jpg 
  • Enable Disable/enable the Quick view, type 1 to enable, and 0 to disable
    Show by default If you type 1 (enable), the quick view panel opens as soon as the lightbox opens.

 

Loading

Change the loading animation

  • Select the loading animation image element and Replace the Image.
  • fl20.jpg

 

 

Resizing the loading animation

  • Use the handle next to the animated image to resize the image.
  • flr.jpg 
Have more questions? Submit a request