JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://sachinchoolur.github.io/lightGallery/light-gallery/js/lightGallery.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/light-gallery/css/lightGallery.css">
<button class="launchGallery" type="button">Launch Gallery</button>
<ul>
<li>
<a href="javascript:void(0);" class="launchGallery">
<img src="https://sachinchoolur.github.io/lightgallery.js/static/img/thumb-3.jpg" />
</a>
</li>
</ul>
CSS
ul{
list-style: none outside none;
padding-left: 0;
}
li {
display: block;
float: left;
height: 100px;
margin-bottom: 6px;
margin-right: 6px;
width: 100px;
}
button{
cursor:pointer;
}
JavaScript
$('.launchGallery').click(function(){
$(this).lightGallery({
dynamic:true,
mobileSrc:true,
dynamicEl:[ {"src":"http://sachinchoolur.github.io/lightGallery/img/img1.jpg","thumb":"http://sachinchoolur.github.io/lightGallery/img/thumb1.jpg","mobileSrc":"http://sachinchoolur.github.io/lightGallery/img/mobile1.jpg"}, {"src":"http://sachinchoolur.github.io/lightGallery/img/img2.jpg","thumb":"http://sachinchoolur.github.io/lightGallery/img/thumb2.jpg","mobileSrc":"http://sachinchoolur.github.io/lightGallery/img/mobile2.jpg"}
]
});
});