ItemSlide + Fancybox Supersized（从函数内启动 Fancybox）

Question

我正在尝试将用 ItemSlide.js 制作的旋转木马与 Fancybox 结合起来，扩展到超大尺寸。

这里是 Fancybox Supersized 的例子（没有集成到 ItemSlide 中） http://jsfiddle.net/RyTcS/

ItemSlide 可以在这里找到： http://itemslide.github.io/

我想做的是使用 FancyBox Supersized 打开轮播中的图像以在 tap/click 上展开整个页面。

我现在的代码是这样的：

// Start the carousel        
carousel_1 = $("#outfit_1");
carousel_1.itemslide({disable_clicktoslide:true});

// On tap, open Fancybox supersized
carousel_1.on('clickSlide', function(event) {
    console.log("Clicked - "+ event.slide);
    var image = $('#outfit_1 li').eq(event.slide).attr('data-image');
    console.log(image);
    $.fancybox({
        padding    : 0,
        margin     : 5,
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '100%',
                height  : '100%',
                content : '<div class="fancybox-image" style="background-image:url(' + image + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });
});

这是我的示例的 JS Fiddle： http://jsfiddle.net/8cwgpwdk/

点击没有反应。有人知道吗？

Answer 1

没有必要使用 FancyBox，因为您尝试做的事情非常简单，只需 jQuery。

$("#fullscreen").show().css("background-image","url("+image+")");

这是一个固定版本（现在可以在手机上使用）： http://jsfiddle.net/8cwgpwdk/11/

Answer 2

好的，这是 FancyBox 的解决方案，打开 fancybox 只需使用此方法：

$.fancybox.open

这是一个 jsFiddle（带有后加载回调）：http://jsfiddle.net/8cwgpwdk/14/

顺便说一句，您的第一个示例不起作用的部分原因是因为您从 github 加载了 FancyBox，但它们会阻止，因此请改用 cdn。我也修好了。

ItemSlide + Fancybox Supersized（从函数内启动 Fancybox）

ItemSlide + Fancybox Supersized (launch Fancybox from within function)

jquery

fancybox

carousel