HTML Markup
LightGallery does not force you to use any specific HTML markup. You can use almost any kind of markup with the help of `selector` setting.
HTML Structure
<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>
JavaScript
lightGallery(document.getElementById('anchor-tag'));
HTML Structure
<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>
JavaScript
lightGallery(document.getElementById('ul-li'));
HTML Structure
<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>
JavaScript
lightGallery(document.getElementById('selector1'), {
selector: '.item',
});
HTML Structure
<a id="selector2" href="img/img1.jpg"> Click to open </a>
JavaScript
lightGallery(document.getElementById('selector2'), {
selector: 'this',
});