Lightgallery with images in separate divs

I have multiple images in rows and I want Lightgallery (http://ift.tt/1HJbRHZ) 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?

   <div class="container-fluid" id="retreats-image-container">
                <div class="row row-center">


                    <a href="img/retreats/retreats1.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats1.jpg" width="100%" height="100%" title="Special events" alt="Special events">
                        </div>
                    </a>

                    <a href="img/retreats/retreats2.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats2.jpg" width="100%" height="100%" title="Beauty and makeup" alt="Beauty and makeup">
                        </div>
                    </a>

                    <a href="img/retreats/retreats3.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats3.jpg" width="100%" height="100%" title="Special events" alt="Special events">
                        </div>
                    </a>

                    <a href="img/retreats/retreats4.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats4.jpg" width="100%" height="100%" title="Special events" alt="Special events">
                        </div>
                    </a>
                </div>

                <div class="row row-center">
                    <a href="img/retreats/retreats5.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats5.jpg" width="100%" height="100%"title="Special events" alt="Special events">
                        </div>
                    </a>

                    <a href="img/retreats/retreats6.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats6.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
                        </div>
                    </a>

                    <a href="img/retreats/retreats7.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">
                                <img src="img/retreats/retreats7.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
                        </div>
                    </a>

                    <a href="img/retreats/retreats8.jpg">
                        <div class="col-lg-3 col-sm-12 text-center retreats-img">

                              <img src="img/retreats/retreats8.jpg" width="100%" height="100%"  title="Special events" alt="Special events">
                        </div>
                    </a>
                </div>
</div>

The javascript:

This creates 2 galleries of 4 images

$(document).ready(function() {
    $(".row").lightGallery();
});

This doesn't work, but it's essentially what I want to do to get one gallery of 8 images

$(document).ready(function() {
    $("#retreats-image_container").lightGallery();
});