Attributes

By default, lightGallery takes all required inputs from HTML attributes, here you can find list of all supported HTML attributes

Available options

Name Description true

alt

alt attribute for the image

data-disqus-identifier

Disqus page identifier

Please refer official disqus documentation for more info

data-disqus-url

Disqus page url

Please refer official disqus documentation for more info

data-download

Name of the file after it is downloaded.

The HTML value of the download attribute. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.). More info

data-download-url

Download url for your image/video.

Pass false if you want to disable the download button.

data-facebook-share-url

Facebook share URL.

Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.

data-fb-html

Facebook comments body html

Please refer facebook official documentation for generating the HTML markup 


<div
     class="fb-comments"
     data-href="https://www.lightgalleryjs.com/demos/comment-box/#facebook-comments-demo"
     data-width="400"
     data-numposts="5">
</div>

data-iframe

Set true is you want to open your url in an iframe

data-iframe-title

Title for iframe

data-pinterest-share-url

Pinterest share URL.

Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. Note?: Pinterest requires absolute URL

data-pinterest-text

Description for Pinterest post.

data-poster

Poster url

data-responsive

List of images and viewport's max width separated by comma.

Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.

data-sizes

srcset sizes attribute for the main image

data-slide-name

Custom slide name to use in the url when hash plugin is enabled

data-sources

Source attributes for the picture element

data-src

url of the media

data-srcset

srcset attribute values for the main image

data-sub-html

Caption for the slide

You can either pass the HTML markup or the ID or class name of the element which contains the captions

data-sub-html-url

url of the file which contain the sub html.

Note - Does not support Internet Explorer browser

data-*

Thumbnail url

By default lightGallery uses the image inside gallery selector as thumbnail. But, If you want to use external image for thumbnail, pass the thumbnail url via any data attribute and pass the attribute name via exThumbImage option 


<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'
})

title

Title attribute for the video

data-tweet-text

Tweet text

data-twitter-share-url

Twitter share URL.

Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.

data-video

Video source

data-width

Actual size of the image in px.

This is used in zoom plugin to see the actual size of the image when double taped on the image.

Edit this page on GitHub

← Dynamic variables
Image and video gallery for React →