<div id="gallery-images" class="container-fluid  mt-5">
    <h3>Gallery</h3>
    <div class="row ">
        <?php
        foreach ($gallery_list as $im) { ?>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <a href="<?= SITE_URL . 'public/images/gallery/' . $im['image']; ?>" data-fancybox="group" data-caption="Beach Villa Home">
                    <img class="image_data" src="<?= SITE_URL . 'public/images/gallery/' . $im['image']; ?>" alt="Beach Villa Home">
                </a>
            </div>
        <?php } ?>
    </div>
</div>

<script>
    $('[data-fancybox]').fancybox({
        buttons: [
            'close'
        ],
        wheel: false,
        transitionEffect: "slide",
        loop: true,
        toolbar: false,
        clickContent: false
    });
</script>