LightGallery does not force you to use any kind on
markup. You can use almost any king of markup with the
help of selector setting.
<div id="anchor-tag">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
$('#anchor-tag').lightGallery();
<ul id="ul-li">
<li data-src="img/img1.jpg">
<img src="img/thumb1.jpg" />
</li>
<li data-src="img/img2.jpg">
<img src="img/thumb2.jpg" />
</li>
...
</ul>
$('#ul-li').lightGallery();
<div id="selector1">
<h2>Gallery title</h3>
<div class="item" data-src="img/img1.jpg">
<img src="img/thumb1.jpg" />
</div>
<div class="item" data-src="img/img2.jpg">
<img src="img/thumb2.jpg" />
</div>
...
</div>
$('#selector1').lightGallery({
selector: '.item'
});
<a id="selector2" href="img/img1.jpg">
Click to open
</a>
$('#selector2').lightGallery({
selector: 'this'
});