title: LightGallery multiple galleries on same page
body: <p>Installed lightGallery today on my site and here is the part of code:</p>
  
  <pre><code>&lt;div class="portfolio-content"&gt;      
              &lt;ul id="portfolio_filters" class="portfolio-filters"&gt;
                      &lt;li class="active"&gt;
                        &lt;a class="filter btn btn-sm btn-link grph active" data-group="graphics"&gt;Banners&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                        &lt;a class="filter btn btn-sm btn-link" data-group="logo"&gt;Logo&lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
  
     &lt;div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3"&gt;
  
                      &lt;figure class="gallery-graphics" data-src="images/bnrs/01-bnr.png" data-sub-html="&lt;h4&gt;Banner 1&lt;/h4&gt;" data-groups='["graphics"]'&gt;
                        &lt;a href=""&gt;&lt;img class="img-responsive" src="images/bnrs/01-bnr.png"&gt;&lt;/a&gt;
                      &lt;/figure&gt;
  
                      &lt;figure class="gallery-logo" data-src="images/logo/01-logo.png" data-sub-html="&lt;h4&gt;Logo 1&lt;/h4&gt;" data-groups='["logo"]'&gt;
                        &lt;a href=""&gt;&lt;img class="img-responsive" src="images/logo/01-logo.png"&gt;&lt;/a&gt;
                      &lt;/figure&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Single main container with id #portfolio_grid has 2 galleries with different selectors - 1 for banner images, 2 for logos. I want to see 2 different galleries on click showing 1/1 images each instead of 1/2, so I tried to understand lightGallery HTML markup instructions and wrote this code:</p>
  
  <pre><code>$('#portfolio_grid').lightGallery({
      hash: false,
      selector: '.gallery-graphics'
  });
  
  $('#portfolio_grid').lightGallery({
      hash: false,
      selector: '.gallery-logo'
  });
  </code></pre>
  
  <p>which normally works for first gallery, but doesn't work for second. I tried to wrap <code>&lt;figure&gt;...&lt;/figure&gt;</code> in divs with unique id, but in my case it breaks the site. </p>
  
  <p>After this I tried another solution relating to lightGallery's own destroy() function and wrote this code which partially works only once - I have 1/1 image in first gallery and 1/1 image in second gallery. Second click on gallery image breaks the site.</p>
  
  <pre><code>var $lg = $('#portfolio_grid');
  
  $lg.lightGallery({
    hash: false,
    selector: '.gallery-graphics'
  });
  
  $lg.on('onCloseAfter.lg', function(event) {
    $lg.data('lightGallery').destroy('true');
  
    $lg.lightGallery({
      hash: false,
      selector: '.gallery-logo'
    });
  });
  </code></pre>
  
  <p>How to make lightgallery work with single id and many different selectors? Please help.</p>