Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<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>
<script type="text/javascript"> $(document).ready(function() { $("#lightGallery").lightGallery({ mode:"fade" }); }); </script>
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<ul id="auto-loop"> <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>
<script type="text/javascript"> $(document).ready(function() { $("#auto-loop").lightGallery({ loop:true, auto:true, pause:1000 }); }); </script>
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<ul id="caption"> <li data-title="title1" data-desc="description1" data-src="img/img1.jpg"> <img src="img/thumb1.jpg" /> </li> <li data-title="title2" data-desc="description2" data-src="img/img2.jpg"> <img src="img/thumb2.jpg" /> </li> ... </ul>
<script type="text/javascript"> $(document).ready(function() { $("#caption").lightGallery({ caption:true, desc:true }); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('#dynamic').click(function(e){ $(this).lightGallery({ dynamic:true, caption:true, desc:true, mobileSrc:true, dynamicEl:[ {"src":"img/img1.jpg","thumb":"img/thumb1.jpg","caption":"caption1","desc":"Description1", "mobileSrc":"img/mobile1.jpg"}, {"src":"img/img2.jpg","thumb":"img/thumb2.jpg","caption":"caption2", "desc":"Description2", "mobileSrc":"img/mobile2.jpg"} ] }); }) }); </script>
Create ul and li elements and add the path of the image or video inside the data-src attributes which you wish to open within the lightGallery.
<ul id="rel1" data-rel="imageGallery" class="gallery list-unstyled"> <li data-src="img/img1.jpg"> <a href="#"> <img src="img/thumb1.jpg" /> </a> </li> <li data-src="img/img2.jpg"> <a href="#"> <img src="img/thumb2.jpg" /> </a> </li> </ul> <ul id="rel2" data-rel="imageGallery" class="gallery list-unstyled"> <li data-src="img/img3.jpg"> <a href="#"> <img src="img/thumb3.jpg" /> </a> </li> <li data-src="img/img4.jpg"> <a href="#"> <img src="img/thumb4.jpg" /> </a> </li> </ul>
<script type="text/javascript"> $(document).ready(function() { $('#rel1').lightGallery({rel:true}); $('#rel2').lightGallery({rel:true}); }); </script>
<script type="text/javascript"> $(document).ready(function() { $('#callback').lightGallery({ onOpen: function() { alert('onOpen : Executes immediately once the slider is loaded;'); }, onSlideBefore: function() { alert('onSlideBefore : Executes immediately before each slide transition;'); }, onSlideAfter: function() { alert('onSlideAfter : Executes immediately after each slide transition;'); }, onSlideNext: function() { alert('onSlideNext : Executes immediately before each "Next" slide transition;'); }, onSlidePrev: function() { alert('onSlidePrev : Executes immediately before each "Prev" slide transition;'); }, onBeforeClose: function(){ alert('onBeforeClose : Executes immediately before the start of the close process;'); }, onCloseAfter: function(){ alert('onCloseAfter : Executes immediately once Colorbox is closed;'); } }); }); </script>