Why can't I loop the fancybox gallery?

Question

JavaScript

I'm using a fancibox gallery, but I can't loop it.

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

Maybe some syntax errors?

<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>

Answer 1

Check the console, connected according to the instructions from the off site.
Inserted your markup and the script - it works.