1. INCLUDE CSS AND JS FILES
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>
2. HTML
<ul id="lightGallery">
<li data-src="img/img1.jpg">
<img src="img/thumb1.jpg" />
</li>
<li data-src="img/img2.jpg">
<img src="img/thumb2.jpg" />
</li>
...
</ul>
3. JAVASCRIPT
$(document).ready(function() {
$("#lightGallery").lightGallery();
});
4. OPTIONS
$(document).ready(function() {
$("#lightGallery").lightGallery({
mode:'slide', // Type of transition 'slide' and 'fade'.
useCSS : true, // If true LightGallery will use CSS transitions. if falls jquery animation will be used.
easing: 'ease', // The type of "easing". ex: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'.
speed: 1000, // Transition duration (in ms).
loop: false, // If false, will disable the ability to loop back to the beginning of the slide when on the last element.
auto: false, // If true, the Slider will automatically start to play.
pause: 4000, // The time (in ms) between each auto transition
escKey:true, // Use escape key to close the LightGallery. switch escKey:false, to disable
exThumbImage: false, // In case if you want to use external image as slider thumbnail add the path of the image inside "data-" attribute and change exThumbImage:'data-yourAttribute';
thumbnail: true, // Enable thumbnails option.
caption:false, // swich captions:true to enable image caption. add Image captions inside "data-title" attribute.
desc:false, // swich desc:true to enable image caption. add Image descriptions inside "data-desc" attribute.
controls:true,// if controls:false, controls will not be added
hideControlOnEnd:false, // if hideControlOnEnd:true, control will be hidden on last slide
mobileSrc: false, // To make your website faster in mobile devices you can load separate images (low quality) for Mobile devices.
mobileSrcMaxWidth :640, // You can define from which resolution the images for mobile devices should be loaded.
//touch
swipeThreshold: 50, // By setting the swipeThreshold you can set how far the user must swipe for the next/prev slide
rel:false, // Combine two galleries using data-rel attribute. give same data-rel value for multiple galleries you wish to combine
dynamic:false, // You can dynamically load lightGallery by passing an array object to the lightGallery.
dynamicEl : [],
//video
vimeoColor : 'CCCCCC',
videoAutoplay:true, // switch videoAutoplay:false to disable video autoplay option
videoMaxWidth:855,
//callbacks
onOpen: function() {},
onSlideBefore: function() {},
onSlideAfter: function() {},
onSlideNext: function() {},
onSlidePrev: function() {},
onBeforeClose: function(){},
onCloseAfter: function(){}
);
});
JS Tutorial
