Search code examples
javascriptjquerylightgallery

lightGallery dynamic mode not working with Firefox and Safari

I have this code set up to generate an image gallery gallery containing 34 images:

$(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>"
      }]
    })
  });
});

And it gets called when someone clicks on this link: <div class="exhibit-link"><a id="view-gallery" href="">View Gallery</a></div>

But the link only works in Chrome. When clicked in other browsers the gallery looks like it will display because for a moment you can see the first image appear in an overlay but then it disappears. I don't see anything more in the lightGallery documentation that suggests I'm missing something in my configuration. But I wondered if someone else might have seen this issue and found a solution. Thanks

Solution

  • The solution is to make sure that the browser does not attempt to go to the href location even if it is empty. The empty href will basically reload the page. Changing the link code to 

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

    prevents Firefox and Safari from trying to reload the page. Thus the onclick event gets executed and works.