<script type="text/javascript"> $(document).ready(function() { $("#lightGallery").lightGallery({ mode:'fade', speed: 500, ... }); }); </script>
Name | Expected | Default | Description |
---|---|---|---|
thumbnail | boolean | true | Whether to display a button to show thumbnails. |
caption | boolean | false | Set to true to enable image captions. Add captions inside "data-title" attribute. If attribute is missing, "image n" will be displayed, where n = index of the image in the list. |
captionLink | boolean | false | You can add a link to image caption by setting this to true and providing a link in the data-link attribute. If attribute is missing, link will point to "#". |
desc | boolean | false | Set to true to enable image descriptions. Add descriptions inside "data-desc" attribute. If attribute is missing, "image n" will be displayed, where n = index of the image in the list. |
counter | boolean | false | Whether to show total number of images and index number of currently displayed image. |
controls | boolean | true | If false , prev/next buttons will not be displayed. |
Name | Expected | Default | Description |
---|---|---|---|
mode | 'slide' or 'fade' | 'slide' | Type of transition between images. |
useCSS | boolean | true | LightGallery will try to use CSS transitions by default and fall back to jQuery animation if they are not supported. You can force exclusive usage of jQuery animation by setting this option to false. |
easing | string | 'linear' | Type of easing to be used for animations. Value will be passed unmodified to both transition-timing-function CSS property and jQuery .animate() function. |
speed | number | 1000 | Transition duration (in ms). |
Name | Expected | Default | Description |
---|---|---|---|
hideControlOnEnd | boolean | false | If true , prev/next button will be hidden on first/last image. |
loop | boolean | false | If false, will disable the ability to loop back to the beginning of the gallery when on the last element. |
auto | boolean | false | Enables slideshow mode. |
pause | number | 4000 | The time (in ms) between each auto transition. |
escKey | boolean | true | Whether the LightGallery could be closed by pressing the "Esc" key. |
Name | Expected | Default | Description |
---|---|---|---|
mobileSrc | boolean | false | To make your website faster in mobile devices you can load separate images (low quality) for Mobile devices. Add the path of the image which you wish to load in mobile devices inside data-responsive-src attribute. |
mobileSrcMaxWidth | number | 640 | You can define from which resolution the images for mobile devices should be loaded. |
swipeThreshold | number | 50 | By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image. |
Name | Expected | Default | Description |
---|---|---|---|
vimeoColor | hex color code | 'CCCCCC' | Set vimeo video player theme color. |
videoAutoplay | boolean | true | Switch to false to disable video autoplay option. |
videoMaxWidth | number | 855 | Set limit for video maximal width. |
Name | Expected | Default | Description |
---|---|---|---|
lang | object | { allPhotos: 'All photos' } | Define text of labels. |
All options below expect a function or a pointer to function and does not have any predefined value.
Name | Description |
---|---|
onOpen | Executes immediately after the gallery is loaded. |
onSlideBefore | Executes immediately before each transition. |
onSlideAfter | Executes immediately after each transition. |
onSlideNext | Executes immediately before each "Next" transition. |
onSlidePrev | Executes immediately before each "Prev" transition. |
onBeforeClose | Executes immediately before the start of the close process. |
onCloseAfter | Executes immediately once Colorbox is closed. |
Name | Expected | Default | Description |
---|---|---|---|
dynamic | boolean | false | LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images. |
dynamicEl | array of objects | [] | An array of objects (src , thumb , caption , desc , mobileSrc ) representing gallery elements. See example. |
Name | Expected | Default | Description |
---|---|---|---|
rel | boolean | false | Combine two galleries using data-rel attribute. Give the same data-rel value for multiple galleries you wish to combine. See example. |
exThumbImage | string or false | false | 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.// <li data-exthumbimage="externalThumb.jpg" data-src="img/img1.jpg"></li> // exThumbImage: 'data-exthumbimage'; |