Settings

Add custom class for gallery container This can be used to set different style for different galleries

If true, toolbar, captions and thumbnails will not overlap with media element This will not effect thumbnails if animateThumb is false Also, toggle thumbnails button is not displayed if allowMediaOverlap is false

Where the counter should be appended

control where the sub-html should be appended. If you choose '.lg-outer', you are responsible for placing the div at the right position. '.lg-outer' is useful if you want show custom HTML outside the normal gallery

aria-describedby attribute for gallery

aria-labelledby attribute fot gallery

Backdrop transition duration. Note - Do not change the value of backdrop via css.

If false user won't be able to close the gallery at all This is useful for creating inline galleries.

allows clicks on black area to close gallery.

Configure where the gallery should be appended. Useful to create inline galleries and more It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR

If false, prev/next buttons will not be displayed.

Whether to show total number of images and index number of currently displayed image.

Height of the caption for calculating allowMediaOverlap positions Note - this is only used to find the position of media item if allowMediaOverlap is true. Not for setting height of the captions Set 0 if you want to calculate the height of captions dynamically

Enable download button.

By default download url will be taken from data-src/href attribute but it supports only for modern browsers. If you want you can provide another url for download via data-download-url. pass false in data-download-url if you want to hide download button for the particular slide.

LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.

An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.

Slide animation CSS easing property

Enables desktop mouse drag support

Enables swipe support for touch devices

Whether the LightGallery could be closed by pressing the "Esc" key.

Option to fetch different thumbnail image other than first image

If you want to use external image for thumbnail, add the path of that image inside "data-" attribute and set value of this option to the name of your custom attribute.

<div id="lightGallery">
    <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
</div>

lightGallery(document.getElementById('lightGallery'), {
    exThumbImage: 'data-external-thumb-image'
})

Fetch custom properties from the selector

this is useful for plugin development By default lightGallery fetches and store all the props selectors to reduce frequent dom interaction for fetching props every time. If you need any addition data to be fetched and stored in the galleryItems variable, you can do this just by passing the prop names via extraProps

HTML:
<div id="lightGallery">
    <a href="a.jpg" data-custom-prop="abc"><img src="thumb.jpg" /></a>
    <a href="a.jpg" data-custom-prop="xyz"><img src="thumb.jpg" /></a>
</div>
JS:
lightGallery(document.getElementById('lightGallery'), {
    extraProps: ['customProp']
})
// Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem
lightGallery(document.getElementById('lightGallery'), {
    dynamic: true,
    dynamicEl: [{
        src: 'img/img1.jpg',
        customProp:'abc',
    }]
})

Option to get captions from alt or title tags.

Height of the gallery. example '100%' , '300px'

Delay for hiding gallery controls in ms. Pass 0 if you don't want to hide the controls

If true, prev/next button will be hidden on first/last image.

Note - this option will be ignored if loop or slideEndAnimation is set to true

Hide scrollbar when gallery is opened

Minimum lightGallery version required: V2.5.0

Set height for iframe.

Set max height for iframe.

Set max width for iframe.

Set width for iframe.

specify which slide should load initially

Function to detect mobile devices

Enable keyboard navigation

If you are using lightGallery for commercial projects, you need to purchase a commercial license to get the license key. For projects that are compatible with GPLv3 license, please contact us for getting a license key at contact@lightgalleryjs.com. If you want to test lightGallery before purchasing a commercial license, you can use `0000-0000-000-0000` as a temporary license key

Automatically load poster image for YouTube videos

If false, will disable the ability to loop back to the beginning of the gallery from the last slide.

Separate settings for mobile devices

Note - this is applied only at the time of loading by default controls and close buttons are disabled on mobile devices. use this options if you want to enable them or change any other settings for mobile devices Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values

Type of transition between images.

ability to navigate to next/prev slides on mousewheel

Custom html for next control

Control how many slide items should be kept in dom at a time

To improve performance by reducing number of gallery items in the dom, lightGallery keeps only the lowest possible number of slides in the dom at a time. This has a minimum value of 3

number of preload slides

will exicute only after the current slide is fully loaded. for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.

Custom html for prev control

Reset to previous scrollPosition when lightGallery is closed

By default, lightGallery doesn't hide the scrollbar for a smooth opening transition. If a user changes the scroll position, lightGallery resets it to the previous value

Minimum lightGallery version required: V2.5.0

By default selector element relative to the current gallery. Instead of that you can tell lightGallery to select element relative to another element. Example - '.my-selector-container' | '#my-selector-container' In the code this become selector = document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);

Custom selector property instead of direct children.

Based on your markup structure, you can specify custom selectors to fetch media data for the gallery Pass "this" to select same element You can also pass HTMLCollection directly Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')

Delay in hiding controls for the first time when gallery is opened

If false, close button won't be displayed. Useful for creating inline galleries.

Show maximize icon. Useful for creating inline galleries.

Delay slide transitions.

This is useful if you want to do any action in the current slide before moving to next slide.

Enable slideEnd animation

Transition duration (in ms).

Zoom from image animation duration

Start animation class for the gallery.

• startClass will be empty zoomFromOrigin is true.
• This can be used to change the starting effect when the image is loaded
• This is also applied when navigating to new slides

Customize string.

This can be useful if you want to localize the lightGallery strings to other languages. Use your own service to translate the strings and pass it via settings.strings You can find dedicated strings option for all lightGallery modules in their respective documentation. Note - You need to provide values for all the strings. For example, even if you just want to change the closeGallery string, you need to provide all the other strings as well.

Set to true if the selector in "data-sub-html" should use the current item as its origin.

Support legacy browsers

Currently this is used only for adding support to srcset attribute via picturefill library If true lightGallery will show warning message to include picturefill library

By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.

allows vertical drag/swipe to close gallery false if option closable is false

Trap focus within the lightGallery

Minimum lightGallery version required: V2.5.0

Video max size.

This can be over-written by passing specific size via data-lg-size attribute Recommended video resolution and & aspect ratios https://support.google.com/youtube/answer/6375112

Width of the gallery. example '100%' , '300px'

Enable zoom from origin effect.

You need to know the original image size upfront and provide it via data-lg-size attribute as data-lg-size="1920-1280" If you don't know, the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides, lightGallery will show the default animation if data-lg-size is not available If you are using responsive images, you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used) example - data-lg-size="240-160-375, 400-267-480, 1600-1067" data-responsive="img-240.jpg 375, img-400.jpg 480" data-src="img-1600.jpg" In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used. Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used And above 480, lg-size 1600-1067 and img-1600.jpg will be used

• At the moment, zoomFromOrigin options is supported only for image slides.
• Will be false if dynamic option is enabled or galleryID found in the URL.
• startClass will be empty if zoomFromOrigin is true to avoid css conflicts.