Fancybox product page. Как включить перелистывание изображений по кругу на карточке товара

При открытии изображения из карточки товара подгружается fancybox, с возможностью перелистывания изображений. Допустим, что изображений 3, и достигнув последнего, возможность перелистать дальше по кругу пропадает. Как сделать так, чтобы после изображения 3 шло 1 (по кругу).

Код product.html:

Здесь открывается миниатюра:

<ul class="carousel-list">
    {foreach $product_images as $image}
        <li class="carousel-item" data-image="{shopImageurlPlugin::imgUrl($image, &#039;1600x0&#039;, $product)}{*$wa->shop->imgUrl($image, &#039;1600x0&#039;)*}">
            {*$wa->shop->imgHtml($image, &#039;240x0&#039;, [ &#039;class&#039; => &#039;thumb&#039;, &#039;data-image-id&#039; => $image.id ])*}
            <span href="https://{$smarty.server.HTTP_HOST}{shopImageurlPlugin::imgUrl($image, &#039;1600x0&#039;, $product)}" data-fancybox="images">
            {shopImageurlPlugin::imgHtml($image, &#039;240x0&#039;, [ &#039;class&#039; => &#039;thumb&#039;, &#039;data-image-id&#039; => $image.id ])}
            </span>
        </li>
    {/foreach}
</ul>

код в product.js:

$(document).ready(function(){
$("span[data-fancybox]").fancybox({
    // loop: false, // gallery may not be cyclic
     loop : true,
     hash : false,
    onInit:function () {
            $('body').attr("data-hash", window.location)
        },
    beforeShow: function () {
            window.history.pushState("string", "Title", this.src);
        },
    afterShow: function () {
        // initialize some variables

        var gallerySize = this.opts.index,
            next="",
            prev="";
        if (this.index == gallerySize) {
            // this is the last element of the gallery so next is the first
            next = $("span[data-fancybox]").eq(0).find('img').attr("title"),
            prev = $("span[data-fancybox]").eq(this.index - 1).find('img').attr("title");
        } else if (this.index == 0) {
            // this is the first image of the gallery so prev is the last
            next = $("span[data-fancybox]").eq(this.index + 1).find('img').attr("title"),
            prev = $("span[data-fancybox]").eq(gallerySize).find('img').attr("title");
        } else {
            // otherwise just add or substract to index
            next = $("span[data-fancybox]").eq(this.index + 1).find('img').attr("title"),
            prev = $("span[data-fancybox]").eq(this.index - 1).find('img').attr("title");
        }
        console.log(prev+" /// "+next)
        // set title attributes to fancybox next/prev selectors
        $(".fancybox-button--arrow_right").attr("title", next);
        $(".fancybox-button--arrow_left").attr("title", prev);
    },
    afterClose: function() {
        var hash = $('body').attr("data-hash")
        window.history.pushState("string", "Title", hash);
        $('body').removeAttr("data-hash");
    }
});
});

Вроде установлено `loop: true`, однако это ни на что не влияет.