Important steps to style your Lightbox
The only attributes that can be styled
Styling the lightbox
- 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.
- Select the lightbox part you would like to edit and apply the styling, it will automatically be applied to the gallery.
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
-
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
-
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.
Resizing the loading animation
- Use the handle next to the animated image to resize the image.