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


  • 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



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



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