Lightgallery Captions

You can directly pass image caption html via data-sub-html attribute or just pass id or class name of any html object (div) which contain your cation html.

HTML structure

<div id="caption2" style="display:none">
    <h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>
</div>
<div class="caption3" style="display:none">
    <h4>Sunset Serenity</h4><p>A gorgeous Sunset tonight captured at Coniston Water....</p>
</div>      
                  
<div id="captions">
  <a href="img/img1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" >
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg" data-sub-html="#caption2">
      <img src="img/thumb2.jpg" />
  </a>
  <a href="img/img3.jpg" data-sub-html=".caption3">
      <img src="img/thumb3.jpg" />
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('captions')); 

Caption relative to current element.

HTML structure

   
                  
<div id="relative-caption">
  <a href="img/img1.jpg" data-sub-html=".caption">
      <img src="img/thumb1.jpg" />
      <div class="caption">
        <h4>Caption1</h4><p>Desc1</p>
      </div>
  </a>
  <a href="img/img2.jpg" data-sub-html=".caption">
      <img src="img/thumb2.jpg" />
      <div class="caption">
        <h4>Caption1</h4><p>Desc1</p>
      </div>
  </a>
  ...
</div>

Javascript

lightGallery(document.getElementById('relative-caption'), {
    subHtmlSelectorRelative: true
});