FancyBox 3 - 停止重复

Question

我有一张主图，您可以点击它打开 fancybox 3，我还有一个缩略图画廊，它属于同一个 fancybox 组，当您滚动它们时，它们会用您滚动的图片替换主图 -目的是获得 "zoom" 影响，同时也为画廊的其余部分提供 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

FancyBox 3 - 停止重复

FancyBox 3 - Stop duplicates

jquery

fancybox-3