保持相同的畫廊，當調用fancybox與不同的類

我需要在頁面上以兩種不同的方式調用fancybox - 一個與「fitToView : false」和一個與「fitToView : true」。我想將這些圖像放在同一個畫廊中，但由於它們是從兩個不同的fancybox函數調用的，所以它們不會讓它們像在同一個畫廊中一樣。有沒有辦法動態地應用「fitToView : false」或其他解決方案，以幫助我實現我所期望的目標？保持相同的畫廊，當調用fancybox與不同的類

這裏是我的兩個功能：

$('.fancybox') 
    .attr('rel', 'gallery') 
    .fancybox({ 
     padding : 5, 
     fitToView : true, 
     openEffect : 'elastic' 
    }); 
$('.fancyboxer') 
    .attr('rel', 'gallery') 
    .fancybox({ 
     padding : 5, 
     fitToView : false, 
     openEffect : 'elastic' 
    });

來源

2013-03-29 CLL

嘗試把'AutoDimension：TRUE'？而不是'fitToView'？這種方式你不需要擔心圖像的尺寸 –

@KhawerZeshan：autoDimensions（而不是'AutoDimension'）選項適用於fancybox v1.3.x，並且與v2.x不兼容，並且與裝配圖像尺寸是否在視口中。 – JFK

您可以使用afterLoad回調的每個元素extend的API的fancybox選項。

但首先，你需要一種方法來區分會有什麼元素fitToView設置爲false（默認值是true）

您可以通過設置綁定到的fancybox錨特殊class做到這一點（你會實際上與單個class所有元素調用的fancybox）像：

<a class="fancybox" href="{target}">open image with fitToView : true (default)</a> 
<a class="fancybox nofit" href="{target}">open image with fitToView : false</a>

通知第二的Elemen t有nofit;那麼afterLoad回調中，評估如果當前元素是class nofit和如果是像延長選項fitToView設置爲false：

$(function() { 
    $(".fancybox") 
    .attr("rel", "gallery") 
    .fancybox({ 
     padding : 5, 
     openEffect : 'elastic', 
     afterLoad: function() { 
      if ($(this.element).hasClass("nofit")) { 
       $.extend(this, { 
        fitToView: false 
       }); 
      } 
     } 
    }); 
});

見JSFIDDLE

來源

2013-03-29 08:03:01 JFK

保持相同的畫廊，當調用fancybox與不同的類

回答

相關問題