Question

我已设置此代码以生成包含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文档中没有看到更多内容，表明我在配置中遗漏了一些内容。但我想知道是否有其他人可能已经看到这个问题并找到了解决方案。感谢

Answer 1

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

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

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

lightGallery动态模式无法与Firefox和Safari一起使用

1 个答案: