lightgallery.js 1.x is not actively maintained . Please upgrade to version 2

Gallery with custom transitions.

Lightgallery comes with a numerous number of beautiful built in animations. You can change the type of transitions by passing the transition name via mode setting. You can easily create your own animations if you have CSS knowledge.

Css required

lg-slide and lg-fade transitions are included in lightgallery.css. for all other transitions you need to include lg-animations.css in your document

HTML structure

<div id="custom-transitions">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>
                        

Javascript

lightGallery(document.getElementById('custom-transitions'), {
    mode: 'lg-fade'
})