JQuery LightGallery Settings

Passing settings

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightGallery").lightGallery({
      mode:'fade',
      speed: 500,
      ...
    });
  });
</script>

Elements

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.

Transitions

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).

Navigation

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.

Mobile devices

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.

Video

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.

i18n

Name Expected Default Description
lang object { allPhotos: 'All photos' } Define text of labels.

Callbacks

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.

Dynamical load

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.

Misc

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';