Question

我正在尝试在同一页面上创建多个fancybox，当点击在iphone，ipad或桌面浏览器中使用iframe打开时。

我在默认叠加层上获得了图像，但我无法为每次单击添加一个类，因此我可以显示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>'
    }
});

我以为我可以在点击时添加一个脚本，它会向主体添加一个特定的类，所以我可以为每个差异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添加一个唯一的类，当点击时我可以更改每个的背景。

例如.iphone .fancybox_overlay，.ipad .fancybox_overlay

由于

Answer 1

您可以将所有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");
        }
    }
});

注意我们正在向fancybox叠加层添加iphone_300或iphone_420类，在您自己的css样式表中可能有不同的样式，如

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

参见 JSFIDDLE

编辑：

当我把它们放在 rel = gallery 中时，当我点击下一步时它不会删除以前的addclass

只需将其添加为afterLoad回调中的第一行：

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

请参阅更新的 JSFIDDLE

需要在fancybox中添加周围的div或在单击时向body添加类

1 个答案: