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+")");

这是一个固定版本（现在适用于移动设备）： value types

Answer 2

好的，所以这里是FancyBox的解决方案，打开fancybox只需使用这个方法：

$.fancybox.open

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

BTW部分原因是你的第一个例子不起作用是因为你从github加载了FancyBox并且它们阻塞所以使用cdn代替。我也修好了。

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

2 个答案: