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

Lightgallery custom events

This is just a demonstration of how to use custom events. You can find more custom events here. In this demo you will see background color of gallery changes on every slide

HTML structure

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

Javascript

var $customEvents = document.getElementById('custom-events');
lightGallery($customEvents);

var colours = ['rgb(33, 23, 26)', 'rgb(129, 87, 94)', 'rgb(156, 80, 67)', 'rgb(143, 101, 93)'];
$customEvents.addEventListener('onBeforeSlide', function(event) {
    document.querySelector('.lg-outer').style.backgroundColor =  colours[event.detail.index];
});

Css (for background color transition)

.lg-outer{
    transition: background-color 600ms ease 0s;
}