FancyBox 3 - 停止复制

我有一个主要图像，您可以点击打开fancybox 3，我也有一个缩略图库，它是同一个fancybox组的一部分，当您翻转它们时，它们会将主图像替换为您翻转 - 目的是为了获得“缩放”的影响，但同时也为画廊的其余部分提供fancybox画廊。很显然，由于主要项目在组中，并且在缩略图中，我在fancybox视图中获得了重复项。FancyBox 3 - 停止复制

我该如何解决这个问题？这是我的尝试，当我尝试使用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>

来源

2017-07-14 Stuart Palmer

可能复制https://stackoverflow.com/questions/44425384/how-do-i的-initiate-a-fancybox-3-slideshow-by-click-on-a-image-or-button – Janis

感谢Janis，但是与我所需要的不太一样。我想看到所有的大拇指和更大的预览。将鼠标悬停在拇指上并预览更新到该拇指....单击更新的大预览和fancybox开始...但是在该预览图像的组中的索引处。你知道fancybox 3有没有办法在fancybox中加载该组，但是从给定索引开始？这可能是我的问题的解决方案。我可以做fancybox 2 –

当然，使用'$ .fancybox.open（your_group，options，index）' – Janis

这样的事情，我希望你能得到的想法：

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

来源

2017-07-14 15:17:07 Janis

我认为这就是它！谢谢Janis！你的例子完美地工作。 –

FancyBox 3 - 停止复制

回答

相关问题