How to customize Fancy Box?

On the Gallery Master’s Navigation Panel, select Lightboxes – Fancy Box.

Once you click on “Fancy Box”, you will be redirected to the following page as mentioned below.

Once you would reach the page as seen above, you would be able to manage different Fancy Box settings. For this, you would need to click on particular tabs which you would like to modify from top of the page.

How to customize Settings for Fancy Box?

In order to manage settings for Fancy Box, you would need to click on “Settings” tab from top of the page.

Once you click on “Settings”, you will be redirected to following page as mentioned below.

Here is the description of each control on this page.

Title Position : In this field, you would need to choose position for Title from the provided options.

Button Position : In this field, you would need to choose “Button Position” for Fancy Box.

Navigation Arrows : In this field, you would need to choose “Show” to display navigation arrows.

Mouse Wheel : If you would like that Fancy Box will respond to mouse wheel events, then you would need to choose “Enable” from dropdown or vice-versa.

Repeat Images : If you would like to repeat images in lightbox, then you would need to choose “Enable” from dropdown or vice-versa.

Speed : In this field, you would need to provide “Speed” for slideshow in Fancy Box.

Open speed : In this field, you would need to provide speed of opening for Fancy Box.

Close speed : In this field, you would need to provide speed of closing for Fancy Box.

Escape Button : In this field, you would need to choose “Enable” to close image with Esc Button on keyboard.

Close Button : In this field, you would need to choose “Show” to display Close Button.

Open Effect : In this field, you would need to choose an opening effect for Fancy Box.

Close Effect : In this field, you would need to choose a closing effect for Fancy Box.

Margin : In this field, you would need to provide “Margin” for Fancy Box.

Padding : In this field, you would need to “Padding” for Fancy Box.

Background Color : In this field, you would need to choose “Background Color” for Fancy Box.

Background Opacity : In this field, you would need to provide “Background Opacity” for Fancy Box. It should be from 0 to 100.

Overlay Color : In this field, you would need to choose Color for Overlay.

Overlay Opacity : In this field, you would need to provide Opacity for Overlay. It should be from 0 to 100.

Border Style : In this field, you would need to provide Width, Style and Color for border of Fancy Box.

Border Radius : In this field, you would need to provide “Border Radius” for Fancy Box.

Once everything is being setup, you would need to click on “Save Changes” button located at bottom of the page to save the settings.

How to customize Image Title for Fancy Box?

In order to manage image title for Fancy Box, you would need to click on “Image Title” tab from top of the page.

Once you click on “Image Title”, you will be redirected to following page as mentioned below.

Here is the description of each control on this page.

Title : In this field, you would need to choose “Show” to display Title for image in Fancy Box.

HTML Tag : In this field, you would need to choose “HTML Tag” for Image Title.

Text Alignment : In this field, you would need to choose “Text Alignment” for Image Title.

Font Style : In this field, you would need to provide “Font Size and Color” for Image Title.

Font Family : In this field, you would need to choose “Font Family” for Image Title.

Margin : In this field, you would need to provide “Margin” for Image Title.

Padding : In this field, you would need to provide “Padding” for Image Title.

Once everything is being setup, you would need to click on “Save Changes” button located at bottom of the page to save the settings.

How to customize Image Description for Fancy Box?

In order to manage image description for Fancy Box, you would need to click on “Image Description” tab from top of the page.

Once you click on “Image Description”, you will be redirected to following page as mentioned below.

Here is the description of each control on this page.

Description : In this field, you would need to choose “Show” to display Description for image in Fancy Box.

HTML Tag : In this field, you would need to choose “HTML Tag” for Image Description.

Text Alignment : In this field, you would need to choose “Text Alignment” for Image Description.

Font Style : In this field, you would need to provide “Font Size and Color” for Image Description.

Font Family : In this field, you would need to choose “Font Family” for Image Description.

Margin : In this field, you would need to provide “Margin” for Image Description.

Padding : In this field, you would need to provide “Padding” for Image Description.

Once everything is being setup, you would need to click on “Save Changes” button located at bottom of the page to save the settings.