How to combine individual fancybox to a same fancybox

Question

divs:

<div class="ratio-box">
            <a href="<?php echo SITE_URL;?>public/images/gallery/dining-room-06-lights.jpg"
                data-fancybox="js-gallery" class="add-fancybox-white js-gallery">
            </a>
</div>


<div class="ratio-box">
            <a href="<?php echo SITE_URL;?>public/images/gallery/dining-room-06-lights.jpg"
                data-fancybox="js-gallery" class="add-fancybox-white js-gallery">
            </a>
</div>


<div class="ratio-box">
            <a href="<?php echo SITE_URL;?>public/images/gallery/dining-room-06-lights.jpg"
                data-fancybox="js-gallery" class="add-fancybox-white js-gallery">
            </a>
</div>

At first, I tried using grouped fancybox like:

$('.js-gallery').fancybox({
    ....
    afterLoad: function (instance) {})
});

But the problem was, I have to enable the template from which it was clicked, I am not able to retrieve from inidividual fancybox.

eg:

$(".fancybox-inner").append($(this).find('template[data-type=hotspots]').html());

//Since $(this) is not present in the initialize

So alternatively, I used the loop like:

$('.js-gallery').each(function(){
    var element = $(this);
    $(this).fancybox({
        afterLoad: function( instance, current) {
            $(".fancybox-inner").append(element.find('template[data-type=hotspots]').html());
        },
    });

It works like charm but the only problem was, I am not able to group the images in a same slider.

The version I am using in fancybox: 3.5.7