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 - 停止複製

回答

相關問題