FancyBox 3 - 停止重复

Question

我有一张主图，你可以点击它打开 fancybox 3，我还有一个缩略图画廊，它属于同一个 fancybox 组，当你滚动它们时，它们会用你滚动的那个替换主图——目的是得到一个“缩放”影响但同时也为画廊的rest提供了fancybox画廊。 显然，由于主要项目在组中，也在缩略图中，我在 fancybox 视图中得到了一个副本。

我该如何解决这个问题？ 这是我的尝试，当我尝试使用 Jquery 操纵组中的内容时，但是，当您重新打开 fancybox 时，它似乎被忽略了。 我想知道是否有办法取消绑定和重新绑定组（？），但我在文档中找不到它。

    <!-- Primary Image -->
        <p>
            <a href="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="fancybox-group" class="fancyboxpreviewlink">
                <img class="fancyboxpreviewimage" src="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" />
            </a>
        </p>

    <!-- Fancybox Gallery -->
            <a href="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="" class="fancyboxthumb"
               data-thumb="image1.jpg?w=62&h=62&scale=canvas&bgcolor=white">
                <img src="/image1.jpg?w=62&h=62&scale=canvas&bgcolor=white" />
            </a>
            <a href="/image2.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="fancybox-group" class="fancyboxthumb"
               data-thumb="/image2.jpg?w=62&h=62&scale=canvas&bgcolor=white">
                <img src="/image2.jpg?w=62&h=62&scale=canvas&bgcolor=white" /></a>

        <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
//Manipulate group items
        $(document).ready(function () {
            $('.fancyboxthumb').on("mouseenter", function () {
                var $theThumb = $(this);
                var thisHref = ($theThumb.attr("href"));            

                $('.group').unbind('.fancyboxthumb')

                $('.fancyboxthumb').each(function (i, obj)
                {
                    console.log($(obj));
                    console.log("b4: " + $(obj).data("fancybox"));
                    if (!($theThumb.is($(obj))))
                        $(obj).data("fancybox", "fancybox-group");
                    else
                        $theThumb.data("fancybox", "");
                    console.log("after: " + $(obj).data("fancybox"));
                });

                $('.fancyboxpreviewlink').attr("href", thisHref);
                $('.fancyboxpreviewimage').attr("src", thisHref);
            });
            $('.fancyboxthumb').on("click", function (event) {
                event.preventDefault();
                event.stopPropagation();
            });

        });

    </script>

Answer 1

像这样的东西，希望您能明白：

var index = 0;
var $thumbs  = $('.thumbs').children();
var $primary = $('.primary a');

$primary.on('click', function() {
  // Clone thumbs object
  var $what = $.extend({}, $thumbs);

  // Replace corresponding link inside thumbs with primary  
  $what[ index ] = this;

  // Open fancyBox manually
  $.fancybox.open( $what, {}, index );

  return false;
});

$thumbs.mouseover(function() {
  // Find index
  index = $thumbs.index( this );

  // Update primary link
  $primary.attr('href', $(this).attr('href'));
  $primary.find('img').attr('src', $(this).find('img').attr('src') );
});

https://codepen.io/anon/pen/rwRzvK?editors=1010

Answer 2

我想很多人可能会想到这个问题，希望找到一个解决方案来真正摆脱 fancybox gallery 中的重复项。 这不完全是 OP 所问的，但问题标题听起来肯定是关于消除欺骗。

我有一个页面，其中有多个重复的图像，虽然我希望它们全部显示并触发同一个画廊，但我不希望画廊本身中的骗子。 这是一个使用beforeShow()回调的简单方法。 这使用 Fancybox v3 和动态绑定来“为现在或将来存在的元素附加点击事件侦听器。 ”根据文档：

$().fancybox({
    selector : '#my-container a.fancybox',
    beforeShow: function(e) {
        var vals = [];
        for (var i = 0; i < e.group.length; i++) {
            if (vals.indexOf(e.group[i].src) == -1) {
                vals.push(e.group[i].src);
            } else {
                e.group.splice(i,1);
            }
        }
    }
});