JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.8/js/lightgallery-all.min.js"></script>
<button>Open gallery</button>

<div class="gallery">
  <span class="pic" data-src="http://sachinchoolur.github.io/lightGallery/static/img/1.jpg">
		<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
  </span>
  <span class="pic" data-src="http://sachinchoolur.github.io/lightGallery/static/img/2.jpg">
		<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-2.jpg">
  </span>
  <span class="pic" data-src="http://sachinchoolur.github.io/lightGallery/static/img/3.jpg">
		<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-3.jpg">
  </span>
  <span class="pic" data-src="http://sachinchoolur.github.io/lightGallery/static/img/4.jpg">
		<img src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-4.jpg">
  </span>
</div>

JavaScript

var g = $('div.gallery');
g.lightGallery({
	selector: 'span.pic'
});
$('button').on('click', function(){g.data('lightGallery').slide(0)});