lightGallery version 2 has been released. Please upgrade

# 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 = $('#custom-events');
    $customEvents.lightGallery();

    var colours = ['#21171A', '#81575E', '#9C5043', '#8F655D'];
    $customEvents.on('onBeforeSlide.lg', function(event, prevIndex, index){
        $('.lg-outer').css('background-color', colours[index])
    });

#### Css (for background color transition)

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

## More demos

Thumbnails
Youtube/Vimeo Videos
HTML5 Videos
Transitions
Dynamic
Events
Methods
Iframe
Captions
Responsive
fixed Size
Html Markup
Comment box
Easing
Hash plugin
Share