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, '1600x0', $product)}{*$wa->shop->imgUrl($image, '1600x0')*}"> {*$wa->shop->imgHtml($image, '240x0', [ 'class' => 'thumb', 'data-image-id' => $image.id ])*} <span href="https://{$smarty.server.HTTP_HOST}{shopImageurlPlugin::imgUrl($image, '1600x0', $product)}" data-fancybox="images"> {shopImageurlPlugin::imgHtml($image, '240x0', [ 'class' => 'thumb', 'data-image-id' => $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`, однако это ни на что не влияет.
Пока нет ответов. Ответьте на этот вопрос первым!