0

我设置了这个代码来生成一个包含 34 个图像的图库：

$(document).ready(function (){
  $('#view-gallery').on('click', function() {
    $(this).lightGallery({
      dynamic: true,
      dynamicEl: [{
        "src": '../images/gallery/01_SL_01.jpg',
        'thumb': '../images/gallery/01_SL_01.jpg',
        'subHtml': "<div>Leather-bound miniature volume from an edition of The Merchant of Venice printed in the early 20th century to promote a chocolate company.<br/><em>Photo by Shane Lin.</em> </div>"
      }, {
        'src': '../images/gallery/02_UVALD_03.jpg',
        'thumb': '../images/gallery/02_UVALD_03.jpg',
        'subHtml': "<div>&quot;Hang there my verse, in witness of my love&quot;—page from an elaborately illustrated edition of <em>As You Like It: a Pleasant Comedy newly embellished with sundry decorations by W. H. Low</em> (1900). Low was a celebrated interior design artist who had decorated New York’s Waldorf Astoria.<br/><em>Image: UVA Library Digital Production Group.</em></div>"
      }, { 
      ...     
      }, {
        'src': '../images/gallery/34_SL_34.jpg',
        'thumb': '../images/gallery/34_SL_34.jpg',
        'subHtml': "<div>Minute page ornamentation from miniature volume of <em>Shakespeare’s Sonnets</em> (2000).<br/><em>Photo by Shane Lin.</em></div>"
      }]
    })
  });
});

当有人点击此链接时，它会被调用： <div class="exhibit-link"><a id="view-gallery" href="">View Gallery</a></div>

但该链接仅适用于 Chrome。在其他浏览器中单击时，画廊看起来会显示，因为有一会儿您可以看到第一张图像出现在叠加层中，但随后它消失了。我在lightGallery文档中看不到任何其他内容表明我的配置中缺少某些内容。但我想知道是否其他人可能已经看到了这个问题并找到了解决方案。谢谢

4

1 回答 1

0

解决方案是确保浏览器不会尝试转到 href 位置，即使它是空的。空的 href 基本上会重新加载页面。将链接代码更改为

<a id="view-gallery" href="javascript:void(0)">View Gallery</a>

阻止 Firefox 和 Safari 尝试重新加载页面。因此 onclick 事件被执行并工作。

于 2016-04-11T20:35:22.877 回答