Почему не получается зациклить галерею fancybox?

<script>
$(document).ready(function() {
  $("[data-fancybox]").fancybox({
 loop: true
  });
});
    </script>

<div class="grid grid__certificates">
                        <div class="grid-item">
                            <a data-fancybox="gallery" href="img/gallery/1.png">
                                <img class="img-responsive" src="img/gallery/1.png" alt="">
                            </a>
                        </div>
                        <div class="grid-item">
                            <a data-fancybox="gallery" href="img/gallery/2.png">
                                <img class="img-responsive" src="img/gallery/2.png" alt="">
                            </a>
                        </div>

                        <div class="grid-item hidden-sm">
                            <a data-fancybox="gallery" href="img/gallery/3.png">
                                <img class="img-responsive" src="img/gallery/3.png" alt="" style="margin-bottom: 9px;">
                            </a>

                            <a data-fancybox="gallery" href="img/gallery/4.png" class="hidden-xs hidden-sm">
                                <img class="img-responsive" src="img/gallery/4.png" alt="">
                            </a>
                        </div>
                        <div class="grid-item visible-xs-block ">
                            <a data-fancybox="gallery" href="img/gallery/4.png">
                                <img class="img-responsive" src="img/gallery/4.png" alt="">
                            </a>
                        </div>
                    </div>