booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Light Box Gallery

Light Box Gallery

Preview Widget
Preview Widget
Getting Started
Global Settings
Image Styling
Masonry & Filter Styling
Light Box Styling

More Widgets

• Interactive Carousel
• Filter Images
• Hotspot Image
• Simple Images Slider

# Getting started

The light box gallery widget provides you with the tools to create awesome images galleries. This widget uses a container that will display your images in different layouts, and when the user clicks on an image. a web gallery opens up with a navigation menu and other options. The use of filters and image title text is also possible.

Lets go over the details of this astounding widget.

Content

This is where you will manage your images list. There are two ways to upload images : Advanced & Massive.

  • Advanced :

The advanced option can be used to upload images one by one. You can add an image to the list by clicking on the add item button at the bottom of this section. Each image has the following options.

Image : This is where you will upload or select the image that you want to use.

Image Title : A title name that describes the image content.

Image Caption : A brief explanation for your image..

Custom Classes : This is where you will define this specific image filters. If you want to use more than one filter you can separate them by a single comma. Example : nature,sport,world-tour.

Note that the filters list can be defined in the filter global settings available in the style tab.

  • Massive :

The massive option allows you to upload multiples images at once using the word press gallery system. To get started, select the massive option and click on the + button under Add Images. Then, select the desired images and click on create new gallery. And after finishing with the gallery setup, click on the insert gallery. Each image has the following options.

Alt text: This is where you will define this specific image filters. If you want to use more than one filter you can separate them by a space. Example : nature sport world-tour.

Title :  A title name that describes the image content.

Caption : A brief description of your image.

Note that the filters list can be defined in the filter global settings available in the style tab.

Styling

Under the styling tab section, you will have the full control over the styling & design of the light box gallery elements.

  • Image Styling 

The image styling provide you with the options to change the image hover and to style the overlay, 

-Image Hover Effect : Change the overlay hover style.Select one of the multiple unique hover effects available.

-Enable Overlay : Enable the use of an overlay for your images.

-Overlay Icon : Choose one of the 3 icons available.The selected icon will appear at the center of the overlay.

-Overlay & Icon Colors : Change the colors for both the overlay background and the icon.

-Overlay Show Effect : Alternate the effect that is used for displaying the overlay.A great number of choices are accessible.

-Enable Frame : Enable this if you want a frame sized overlay.Disable this option if you want to use a full image sized overlay.

Masonry & Filter Styling

The masonry and filter sections are going to be used to change  the masonry layout and effects as well as to setup the filters settings and styling.

  • Masonry Global Settings

Change the number of columns, enable the gutter, and change the show effect.

-Columns Number : Set the number of columns that you want to use for the masonry layout.

-Enable Gutter & Gutter Value : Enable this if you want the images to be separated by white space.You can also change the gutter value to control separating space.

-Show Effect : Change the images showing effect.Select one of the many animations available.

  • Filter Global Settings

Setup your filters list, align the filters section, and change the filter links typography.

-Enable Filter : Enable the use of filters for your images.

-Filter Labels : Specify the filters that you want to use.The filters name have to be separated by a comma.

- : Control the horizontal alignement for the filters links section.

-: Change the font family, font size, and all the other text properties for the filters links.

-Enable All Button: Enable the use of an 'all images' button.When the user clicks on this button, all the images in the list will be displayed.

-: Choose if you want the all button to appear on the left or right side of the filters links.

  • Filter Link Styling

Customize the links style.Change colors and add borders and box shadow.

-Link Padding & Margin : Control the links inner and outer space by changing the padding and margin values.

-Normal & Active: Select​ which link state you want to customize.Normal for the idle state of the links and active for when a link is currently selected and active.Note that all the remaining options of this section will only affect the selected state.

-Colors : Customize the color for both the links text and the background with the possible use of gradient colors for the background.

-Radius, Border & Box Shadow : Customize the links background radius to change their shape and add a border and a box shadow to add even more design.

  • Filter Container Styling

You have the full control over the style of both the links outer and inner containers.

-Container & Inner : Select which container to style.The container option allows you to style the whole space around the links section while the inner option is only for the links text container.

-Background : Customize the selected container background & choose to apply either a solid background color or a gradient color.

-Radius, Borders & Shadows : Control  the border for each container and apply custom box shadows.The option to change the shape of the container is also possible by changing the border radius value.

-Padding & Margin : Change the padding and margin values to control the inner and outer space for each container.

Light Box Styling

This section is going to be used to style the light box gallery.You can change the colors and manage the various settings so you can have full control over this feature.

  • Light Box Styling

-Colors : Change the colors for both the light box background and content elements.

-Enable Full Screen : Enable the full screen option for the light box.

-Enable Play Button : Enable the play button to be able to activate an automatic playing of the all your lightbox images.

-Enable Download Button : Enabling the download button will allow you to download the currently displayed image.

-Enable Social Share : Enable the social to be able to share the image link by using the social medias section that will be display on the top side of the light box.

-Social List : The social list where you will set up your social medias list.You can add a social media to the list by clicking in the social medias container area.

-Enable Thumbnail Area : Enabling this will display the a section at the bottom of the light box that will contain a clickable images thumbnails.

 

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020