Check out the WordPress Plugin of lightGallery

Html Markup.

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.

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

$('#anchor-tag').lightGallery();

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

$('#ul-li').lightGallery();

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

$('#selector1').lightGallery({
    selector: '.item'
});

HTML structure

<a id="selector2" href="img/img1.jpg">
    Click to open
</a>

Javascript

$('#selector2').lightGallery({
    selector: 'this'
});