У jquery lightgallery есть ссылка на другую страницу в подписи?

Question

Я пытаюсь добавить URL к заголовку в световой галерее, но само изображение световой галереи является ссылкой, поэтому URL заголовка должен выходить за пределы URL светлой галереи, даже когда я делаю это так же, кактест. страница не загружена, и световая галерея просто открывается с вопросительным знаком image

Проще говоря, я пытаюсь добавить кнопку редактирования в подпись, которая открывает мою страницу редактирования и не открывает световую галерею

Спасибо

РЕДАКТИРОВАТЬ Генерируемый 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:

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

Answer 1

Это немного круто, но вы можете заставить работать ссылки редактирования через 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>

Answer 2

Неправильные URL-адреса ваших изображений: вам нужно "скопировать местоположение изображения" вместо "скопировать местоположение ссылки".

Вы можете четко проверить ссылку на изображения и увидеть, что она не работает илиоткрыт для публики. Если у вас есть API или ключ доступа, это другая история. но насколько ссылка. Это не ссылка для открытого доступа.

Я попробовал ваш код в codepen, изменил только URL-адреса и все начало работать.

например, измените li data-src и img src одного из элементов списка на:

https://www.fujifilmusa.com/products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG

, и вы увидите, что он начинает работать.