fancybox related thumbnails are not loading instead it loads all the thumbs from the gallery

Question

I am trying to create a gallery to load with thumbnails.Using fancybox i am able to achieve this but it loads the thumbnails at once instead of related gallery thumbnails. Here is code for reference:

<div class="fancybox_container" data-project="<?php echo $post->ID; ?>">
    <?php
        $slider = get_field("slider");
        if($slider):
            foreach($slider as $slide):
                $img = $slide["slide"]["img"];
                $gallery = $post->ID;
                $title = get_the_title();
                echo "<a class='fancybox-thumbs' data-fancybox-group='thumb' rel='gallery-{$gallery}' title='{$title}' href='{$img}'><img src='{$img}' /></a>";
            endforeach;
        endif;
    ?>
</div>

Jquery:

<script type="text/javascript">
        jQuery(document).ready(function($){
        $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 100,
                        height : 100
                    },
                     title : {
                                            type : 'inside'
                                      }
                },
                              afterLoad : function() {
                                  this.title = '<h5>Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '</h5>');
                             }
            });

        });

</script>

Here is the link to the gallery page. please correct if i am doing any thing wrong.

http://adi.errortree.com/residential/

Any help really appreciate it.

Thanks in advance

Answer 1

After changing

echo "<a class='fancybox-thumbs' data-fancybox-group='thumb' rel='gallery-{$gallery}' title='{$title}' href='{$img}'><img src='{$img}' /></a>"; to

echo "<a class='fancybox-thumbs' data-fancybox-group='gallery-{$gallery}'  rel='gallery-{$gallery}' title='{$title}' href='{$img}'><img src='{$img}' /></a>";

Issue got fixed.