jquery lightgallery 有一个 url 到另一页的标题？

Question

我正在尝试将 URL 添加到 light gallery 中的标题，但 light gallery 图像本身是 link，因此需要添加标题 URL在灯廊 URL 之外，即使我这样做只是为了测试。页面未加载，灯库仅打开并带有问号图像

简而言之，我正在尝试将编辑按钮添加到打开我的编辑页面但不打开灯廊的标题中

谢谢

编辑生成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

您的图片网址错误，您必须 "copy image location" 而不是 "copy link location".

您可以清楚地检查您的图像 link 并看到它没有工作或打开 public。如果你有一个 api 或访问密钥，那是另一个故事。但就 link 而言。这不是 "open to public" link.

我在 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

你会看到它开始工作了。

Answer 2

这有点麻烦，但您可以通过 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>

jquery lightgallery 有一个 url 到另一页的标题？

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

html

jquery

lightgallery