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.
<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>
lightGallery(document.getElementById('captions'));
<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>
lightGallery(document.getElementById('relative-caption'), {
subHtmlSelectorRelative: true
});