Light Gallery Add-on

A customizable, modular, responsive, lightbox gallery to present your beauty images

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

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.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project