需要添加一個周邊的div到fancybox或點擊時添加一個類到身體

Question

我想在iphone，ipad或桌面瀏覽器中點擊打開iframe時在同一頁面上創建多個fancybox。

我在默認疊加層上獲得了圖像，但我無法爲每個單獨的點擊添加一個類，因此我可以爲iphone，iPad等顯示差異圖像。

這裏的jQuery的兩個工作。我可以將該類添加到fancybox_wrap中，但是我需要針對處理背景的疊加層。

$(".fancybox-420").fancybox({ 
    maxWidth : 480, 
    maxHeight : 600, 
    minWidth : 420, 
    fitToView : false, 
    width  : '90%', 
    height  : '90%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    padding  : 0, 
    tpl: { 
       wrap: '<div class="fancybox-wrap iphone_420" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', 
       next: '<a title="Next" class="fancybox-nav fancybox-next"><span></span></a>', 
       prev: '<a title="Prev" class="fancybox-nav fancybox-prev"><span></span></a>' 
    } 
}); 

$(".fancybox-300").fancybox({ 
    maxWidth : 320, 
    maxHeight : 569, 
    minWidth : 300, 
    fitToView : false, 
    width  : '90%', 
    height  : '90%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    padding  : 0, 
    tpl: { 
       wrap: '<div class="fancybox-wrap iphone_300" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', 
       next: '<a title="Next" class="fancybox-nav fancybox-next"><span></span></a>', 
       prev: '<a title="Prev" class="fancybox-nav fancybox-prev"><span></span></a>' 
    } 
}); 

我想，當點擊我將能夠添加腳本，它將添加特定類的身體，所以我可以針對每個DIFF iframe中fancybox_overlay層，但它打破了的fancybox腳本它不彈出

$(".fancybox-300").on('click', function(e){ 
    e.stopPropagation(); 
    $(".fancybox-overlay").addClass("iphone300"); 
}); 
$(document).on('click', function(e){ 
    if(e.target.className!="fancybox-300") 
    $(".fancybox-overlay").removeClass("iphone300"); 
}); 

我找不到任何類似於我以後的東西。

我非常需要能夠添加一個獨特的類爲每個fancybox iframe點擊時，我可以改變每個背景。

e.g .iphone .fancybox_overlay，.ipad .fancybox_overlay

感謝

Answer 1

可以綁定所有fancyboxes相同的選擇，所以你不需要爲每個的fancybox不同的腳本。您可以添加一個額外的類到你的鏈接到每個單獨的fancybox像

<a class="fancybox i300"...>..</a> 
<a class="fancybox i420"...>...</a> 

然後你就可以像在分離變量聲明每個的fancybox不同的API選項：

// settings for fancybox 300 
var f300 = { 
    maxWidth: 320, 
    maxHeight: 569, 
    minWidth: 300 
}; 
// settings for fancybox 420 
var f420 = { 
    maxWidth: 480, 
    maxHeight: 600, 
    minWidth: 420 
}; 

...並使用與普通的共享選項一個腳本，並使用afterLoad回調應用每個單獨設置，取決於的類以及添加相應的類到的fancybox覆蓋像

$(".fancybox").fancybox({ 
    // common API options 
    fitToView: false, 
    width: '90%', 
    height: '90%', 
    autoSize: false, 
    closeClick: false, 
    openEffect: 'none', 
    closeEffect: 'none', 
    padding: 0, 
    afterLoad: function() { 
     if ($(this.element).hasClass("i300")) { 
      $.extend(this, f300); 
      $(".fancybox-overlay").addClass("iphone_300"); 
     } else if ($(this.element).hasClass("i420")) { 
      $.extend(this, f420); 
      $(".fancybox-overlay").addClass("iphone_420"); 
     } 
    } 
}); 

注意我們要添加類或者iphone_300或iphone_420到的fancybox疊加，可能你自己的CSS樣式表內有不同的風格像

.iphone_300 { 
    background: rgba(58, 42, 45, 0.8) 
} 
.iphone_420 { 
    background: rgba(0, 0, 0, 0.2) 
} 

見JSFIDDLE

---

編輯：

當我在 相對=畫廊，當我點擊旁邊它不刪除以前的addclass

只需添加該把這些作爲afterLoad回撥中的第一行：

$(".fancybox-overlay").removeClass("iphone_300").removeClass("iphone_420"); 

查看已更新JSFIDDLE