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 id="launchGallery">Launch Gallery</button>
<div class="customHtml1" style="display:none">
<div class='customHtml'><h4><a href="https://www.google.com/" target="_blank">Google</a></h4></div>
</div>
<div class="customHtml2" style="display:none">
<div class='customHtml'><h4><a href="https://www.yahoo.com/" target="_blank">Yahoo</a></h4></div>
</div>
CSS
ul{
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-left: 0;
}
li{
display: block;
float: left;
height: 100px;
margin-bottom: 6px;
margin-right: 6px;
width: 100px;
}
JavaScript
$('#launchGallery').click(function(){
$(this).lightGallery({
dynamic:true,
dynamicEl:[ {"src":"http://sachinchoolur.github.io/lightGallery/img/img1.jpg","thumb":"http://sachinchoolur.github.io/lightGallery/img/thumb1.jpg","sub-html":".customHtml1"}, {"src":"http://sachinchoolur.github.io/lightGallery/img/img2.jpg","thumb":"http://sachinchoolur.github.io/lightGallery/img/thumb2.jpg","sub-html":".customHtml2"}
]
});
});