ItemSlide + Fancybox超大号（从功能内部启动Fancybox）

Question

我正在尝试将由ItemSlide.js制成的旋转木马与Fancybox结合使用，以扩展为超大尺寸。

这是Fancybox Supersized（未集成到ItemSlide中）的示例http://jsfiddle.net/RyTcS/

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

我想做的是使用FancyBox Supersized打开轮播中的图像以在点击/单击时展开整页。

目前，我的代码是这样的：

// 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小提琴： 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。 我也解决了。