Question

我有一个主图像，你点击打开fancybox 3，我还有一个缩略图库，它是同一个fancybox组的一部分，当你滚动它们时，它们用你翻过的那个替换主图像 - 目的是获得＆＃34;缩放＆＃34;影响，但同时也为画廊的其余部分提供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 - 停止重复

1 个答案: