FancyBox 3 - 重複を停止する

Question

私はあなたがクリックすると、fancybox 3を開くためにクリックするプライマリイメージがあります。また、同じfancyboxグループの一部であるサムネイルギャラリーもあります。ロールオーバーする - 目的は "ズーム"の影響を受けることですが同時にギャラリーの残りの部分のファンシーボックスのギャラリーを提供しています。 明らかに、プライマリアイテムがグループにあり、サムネイルにもあるので、私はfancyboxビューで複製を取得します。

どのようにすればいいですか？ここで私の試みは、私はJqueryを使用してグループにあるものを操作しようとすると、それは無視されるように思える場合は、ファンシーボックスを再度開く。グループのバインドを解除して再バインドする方法があるのだろうかと思っていますが、私はその文書でそれを見つけることができません。

<!-- 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