title: Lightgallery with images in separate divs
body: <p>I have multiple images in rows and I want <a href="https://github.com/sachinchoolur/lightGallery" rel="nofollow">Lightgallery</a> to capture all the images on my page. I can only seem to get separate light galleries for each row instead of one big gallery. The problem occurs because I have sets of images inside divs, with multiple divs in one big container. How can I get all the images in retreats-image-container to merge/join/combine into one gallery?</p>
  
  <pre><code>&lt;div class="container-fluid" id="retreats-image-container"&gt;
      &lt;div class="row row-center"&gt;
          &lt;a href="img/retreats/retreats1.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats1.jpg" width="100%" height="100%" title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats2.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats2.jpg" width="100%" height="100%" title="Beauty and makeup" alt="Beauty and makeup"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats3.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats3.jpg" width="100%" height="100%" title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats4.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats4.jpg" width="100%" height="100%" title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="row row-center"&gt;
          &lt;a href="img/retreats/retreats5.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats5.jpg" width="100%" height="100%"title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats6.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats6.jpg" width="100%" height="100%"  title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats7.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats7.jpg" width="100%" height="100%"  title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
          &lt;a href="img/retreats/retreats8.jpg"&gt;
              &lt;div class="col-lg-3 col-sm-12 text-center retreats-img"&gt;
                  &lt;img src="img/retreats/retreats8.jpg" width="100%" height="100%"  title="Special events" alt="Special events"&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <p>This creates 2 galleries of 4 images</p>
  
  <pre><code>$(document).ready(function() {
      $(".row").lightGallery();
  });
  </code></pre>
  
  <p>This doesn't work, but it's essentially what I want to do to get one gallery of 8 images</p>
  
  <pre><code>$(document).ready(function() {
      $("#retreats-image_container").lightGallery();
  });
  </code></pre>