Parallax images, easily set distances, hover styles, layout mode and much more with this complete gallery widget
- Parallax (To move single columns of a grid at different speeds while scrolling)
- Masonry Layout (If grid cells have different heights, a layout free of gaps can be created)
- 03 gallery layout modes
- Lightbox integration
- Transition effect
- Share controls
- Caption/Cover/Icon overlay controls
- Grid columns system, define special column on any devices
- and much more
Image Overlay and Facebook Comment Box
Fixed Size Mode
Content Fields
Content Fields settings, all content fields of an add-on are shown in the Items List when adding new item or modify existing item. Here is a list of common content fields.
| Setting | Description |
|---|---|
| Image | An image field with an image picker. |
| Image ALT | Insert Alt text, which is an important for SEO purposes and part of making a site accessible. |
| Thumbnail | Add your thumbnail image for item, if thumbnail image are empty, the main image will be added as thumbnail image. |
| Title | A text field used for Image title. |
| Content | A text field for the main text blocks. |
Lightgallery Settings
Lightgallery settings, learn more about the Lightgallery add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Style | Present your gallery with different styles (Support 03 styles) |
| Transition Mode | Lightgallery comes with a numerous number of beautiful built in animations. You can change the type of transitions image ( 30 styles support) |
| Show Image Captions | Show title and image content as caption for images when opening light gallery |
| Show Image ALT Captions | If Show image captions is disabled, the image alt will be added when opening image, you can use this option to show/hide image alt when opening gallery. |
| Show Thumbnails | Show or hide thumbnail below gallerry |
| Show Toogle Thumbnails | Whether to display thumbnail toggle button. |
Misc Settings
Misc settings, learn more about the Lightgallery add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Show Share Icon | Show facebook, twitter, google plus and pinterest button icons |
| Show Zoom Icon | Show Zoom-in/out button for image |
| Show Autoplay Icon | Show Autoplay for image |
| Show Fullscreen Icon | Show fullscreen icon option |
Column Settings
Columns control the grid layout of your content.
| Setting | Description |
|---|---|
| Enable masonry effect | The masonry effect creates a layout free of gap even if grid cell have different height. |
| Parallax | To move single columns of a grid at different speeds while scrolling |
| Gutter | The Gutter setting defines the spacing between columns. |
| Show dividers | Display dividers between grid cells, a line between the columns is displayed. |
| Phone Portrait/Phone Landscape/Tablet Landscape/Desktop/Large Screens | Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size. |
Overlay Settings
Create an image overlay, which comes in different styles.
| Setting | Description |
|---|---|
| Mode: Cover/Caption/Icon | When using cover mode, you need to set the text color manually |
| Display overlay on hover | Display Image content on hover |
| Image Transition | Select a hover transition for the Image (support 03 style) |
| Style | Select a style for the overlay(support 07 styles) |
| Text color | Set light or dark color mode for text, buttons and controls |
| Padding | Set the padding between the overlay and its content. |
| Overlay Positions | A collection of utility classes to position content (13 positions support). |
| Margin | Apply a margin between the overlay and the image container. |
Overlay Settings
Create an image overlay, which comes in different styles.
| Setting | Description |
|---|---|
| Mode: Cover/Caption/Icon | When using cover mode, you need to set the text color manually |
| Display overlay on hover | Display Image content on hover |
| Image Transition | Select a hover transition for the Image (support 03 style) |
| Style | Select a style for the overlay(support 07 styles) |
| Text color | Set light or dark color mode for text, buttons and controls |
| Padding | Set the padding between the overlay and its content. |
| Overlay Positions | A collection of utility classes to position content (13 positions support). |
| Margin | Apply a margin between the overlay and the image container. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on (default support 16 animation effects) |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |
Title
Title
Title