使用fancybox-media with fancybox-thumbs

我正在嘗試使用Fancybox創建（組合）圖像和YouTube視頻庫，同時也利用Fancybox的大拇指。我遇到了兩個問題：使用fancybox-media with fancybox-thumbs

當您點擊視頻鏈接（第一個鏈接-PS，我沒有嘗試瑞克滾動你，當你點擊它大聲笑），它打開了，但它不顯示大拇指或讓您瀏覽組中的其他項目
如果您單擊圖像鏈接（第二或第三個鏈接），它會顯示所有已生成的縮略圖 - 包括視頻的縮略圖......但是當您點擊視頻的縮略圖時，它不會跳到視頻。

想法？

$('.fancybox-thumbs').fancybox({ 
    prevEffect: 'none', 
    nextEffect: 'none', 
    closeBtn : true, 
    arrows : true, 
    nextClick : true, 
    helpers : {thumbs: {width: 50, height: 50}} 
}); 

$('.fancybox-media') 
    .attr('rel', 'media-gallery') 
    .fancybox({ 
     openEffect : 'none', 
     closeEffect: 'none', 
     prevEffect : 'none', 
     nextEffect : 'none', 
     arrows  : true, 
     helpers : {media: {}, buttons: {}} 
});

這是我到目前爲止有：http://jsfiddle.net/6j7wxr8e/

來源

2014-10-16 Brittany Layne Rapheal

首先，我們注意到一個的fancybox畫廊的所有元素都必須同時共享，同一選擇和相同rel屬性（或相同data-fancybox-group屬性）

在您的示例中，選擇器.fancybox-thumbs和.fancybox-media不能屬於同一個圖庫，無論它們具有相同的rel屬性。這也適用於共享相同選擇器但具有不同rel屬性值的元素。是否有意義？

因此，請確保您的元素，如

<a class="fancybox"> 
<a class="fancybox"> 
<a class="fancybox">

您可能不需要硬編碼rel屬性，因爲你可以初始化的fancybox一樣共享相同的選擇：

$('.fancybox').attr('rel', 'media-gallery').fancybox();

..它將rel屬性（media-gallery）設置爲具有類別fancybox的所有元素。

，那麼你可以組一個初始化腳本所有的API選項，包括的fancybox助手媒體，拇指，按鈕等類似

jQuery(document).ready(function ($) { 
    $('.fancybox').attr('rel', 'media-gallery').fancybox({ 
     prevEffect: 'none', 
     nextEffect: 'none', 
     closeBtn: true, 
     arrows: true, 
     nextClick: true, 
     helpers: { 
      thumbs: { 
       width: 50, 
       height: 50 
      }, // requires to include thumbs js and css files 
      media: {}, // requires to include media js file 
      buttons: {} // requires to include buttons js and css files 
     } 
    }); 
});

請參閱分叉JSFIDDLE

來源

2014-10-16 20:11:19 JFK

你真棒！我注意到他們共享了一些相同的API選項，並試圖鞏固它們 - 它們一直在打破它。（我顯然是做錯了。）由於我正在開發的項目的性質，我仍然必須對rel屬性進行硬編碼，但這是一個簡單的修復方法。非常感謝！ – 2014-10-17 03:22:00

使用fancybox-media with fancybox-thumbs

回答

相關問題