Is it possible to set breakpoints for different rowHeights?

[damott]

I'm working with using justified gallery in conjunction with lightgallery. I want to be able to have different rowHeight for different screen sizes. I have tried the following code, but it disables the close button within the lightgallery lightbox. `$(document).ready(function() { $("#animated-thumbnails-gallery") .justifiedGallery({ captions: false, rowHeight: 500, margins: 5 })

.on("jg.complete", function () {
  var screenWidth = $(window).width();
  var customRowHeight = screenWidth < 960 ? 300 : 500;
  $("#animated-thumbnails-gallery").justifiedGallery({
    rowHeight: customRowHeight
  });
  window.lightGallery(
    document.getElementById("animated-thumbnails-gallery"),
    {
      mode: 'lg-fade',
      download: false,
            thumbnail: false,
            hideBarsDelay: 2000,
      autoplayFirstVideo: false,
      pager: false,
      galleryId: "nature",
      plugins: [lgZoom, lgThumbnail],
      mobileSettings: {
        controls: false,
        showCloseIcon: false,
        download: false,
        rotate: false
      }
    }
  );
});

});`

[clanmills]

The 'customRowHeight' in justifieldGallary({...}) works for me as follows:

            var rowHeight = $(window).width() < 600 ? 100 : 200;
            console.log('rowHeight',rowHeight);
            // create the justifiedGallery, and when jg.complete, create the lightGallery
            jQuery("#animated-thumbnails-gallery").justifiedGallery(
            { captions  : true
            , rowHeight : rowHeight
            , lastRow   : 'justify'
            , margins   : 3
            }).on ( "jg.complete", function () {
                window.lightGallery(
                  document.getElementById("animated-thumbnails-gallery"),
                  { galleryId : "clanmills"
                  , pager     : false  /* horrible dots */
                  , loop      : true   /* move to first from last and vice versa */
                  , plugins   : [lgAutoplay, lgComment, lgFullscreen, lgHash, lgPager, lgRotate, lgShare, lgVideo, lgZoom, lgThumbnail]
                  }
                );
            }); 

This code is only executed once when the page is loaded. When you resize the browser, you have to reload the page.