jquery lightgallery have a url to another page in the caption?

I'm trying to add a URL to a caption in the light galley, but the light gallery image itself is a link, so the caption URL needs to go outside of the light gallery URL, even when I do this just as a test. the page isn't loaded and light gallery just opens with the question mark image

simply put I'm trying to add an edit button to the caption that opens my edit page and doesn't open the light gallery

Thanks

EDIT Generated HTML html:

<ul id="lightgallery">           
    <li data-src="https://application.s3.amazonaws.com/media/site_images/LI02after.jpg?AWSAccessKeyId=KEY&amp;Signature=aoEeOyzRvvKSaUQWY91Wo2dM3Rw%3D&amp;Expires=1570626218" data-sub-html="Photo - LI-02 - 04 Oct 2019">
        <a href="">
            <img class="img-responsive" src="https://application.s3.amazonaws.com/media/CACHE/images/site_images/LI02after/76c89641ae7d8363a906f69bde6c72f4.jpg?AWSAccessKeyId=KEY&amp;Signature=VUWPRLyh9xHB3liRDnLEuH7cBo8%3D&amp;Expires=1570626218">
            <div class="lightb-gallery-poster">
                <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
            </div>
        </a>
        <h5 class="text-white">Photo - LI-02<br><small class="text-muted">04 Oct 2019</small></h5>
        <a class="pull-right" href="/sites/edit_file/272/1/">
            <i class="fa fa-edit" aria-hidden="true"></i>
        </a>
    </li>
    <li data-src="https://application.s3.amazonaws.com/media/site_images/YO-05_after.jpg?AWSAccessKeyId=KEY&amp;Signature=oNrlgZ%2FaySqHhK8X91E3M%2BE69U0%3D&amp;Expires=1570626219" data-sub-html="Photo - YO-05 - 04 Oct 2019">
        <a href="">
            <img class="img-responsive" src="https://application.s3.amazonaws.com/media/CACHE/images/site_images/YO-05_after/ec68229ca57c5a4b25973a7f73c59bc1.jpg?AWSAccessKeyId=KEY&amp;Signature=6qsiNXCMi0l00DxmtbUMEnQOlSY%3D&amp;Expires=1570626219">
            <div class="lightb-gallery-poster">
                <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
            </div>
        </a>
        <h5 class="text-white">Photo - YO-05<br><small class="text-muted">04 Oct 2019</small></h5>
        <a class="pull-right" href="/sites/edit_file/273/1/">
            <i class="fa fa-edit" aria-hidden="true"></i>
        </a>
    </li>
    <li data-src="https://application.s3.amazonaws.com/media/site_images/DE-02-SW-03.jpeg?AWSAccessKeyId=KEY&amp;Signature=YIkANh1aRvDm4ty5zuFcbDFG4Es%3D&amp;Expires=1570626219" data-sub-html="Photo - DE-02 - 04 Oct 2019">
        <a href="">
            <img class="img-responsive" src="https://application.s3.amazonaws.com/media/CACHE/images/site_images/DE-02-SW-03/35834b2b2713098a83758b7e82f3c777.jpeg?AWSAccessKeyId=KEY&amp;Signature=p3LPMdWDhRkzetPCwPTNcxT%2Fyfs%3D&amp;Expires=1570626219">
            <div class="lightb-gallery-poster">
                <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
            </div>
        </a>
        <h5 class="text-white">Photo - DE-02<br><small class="text-muted">04 Oct 2019</small></h5>
        <a class="pull-right" href="/sites/edit_file/274/1/">
            <i class="fa fa-edit" aria-hidden="true"></i>
        </a>
    </li>
</ul>

lightgallery code:

<script type="text/javascript">
$('#lightgallery').lightGallery({
    thumbnail:true,
});
</script>

It's a bit of a kludge but you can make the edit links work via JS onclick:

<a onclick="document.location.href='/sites/edit_file/272/1/'; return false;" class="pull-right" href="/sites/edit_file/272/1/">
  <i class="fa fa-edit" aria-hidden="true">asdf</i>
</a>