JQuery lightGallery Examples

Fade Transition

HTML Structure

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>

Javascript

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

Gallery With Auto Slide and Loop

HTML Structure

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>

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $("#auto-loop").lightGallery({
        loop:true,
        auto:true,
        pause:1000
    }); 
  });
</script>

Gallery With Caption and Description

HTML Structure

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>

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $("#caption").lightGallery({
        caption:true,
        desc:true
    }); 
  });
</script>

Load Dynamically

Load LightGallery

Javascript

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

Gallery Relation

Gallery1

Gallery2

HTML Structure

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>

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $('#rel1').lightGallery({rel:true});
    $('#rel2').lightGallery({rel:true}); 
  });
</script>

Gallery With Callbacks

Javascript

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