ItemSlide + Fancybox Supersized（从功能内启动Fancybox）

我试图将用ItemSlide.js制作的旋转木马与Fancybox结合使用，扩展到超大尺寸。ItemSlide + Fancybox Supersized（从功能内启动Fancybox）

这里是超大型的fancybox（不融入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/

它不能在点击响应。有人有线索吗？

来源

2015-08-17 maartenmachiels

好了，所以这里是用的fancybox的解决方案，打开的fancybox简单地使用这种方法：

$.fancybox.open

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

顺便说一句，你的第一个例子不起作用的部分原因是因为y ou从github加载FancyBox并且它们阻塞，所以使用cdn来代替。我也修正了这一点。

来源

2015-08-20 20:11:04 nir9

谢谢@ nir9，但我可以让Fancybox正常工作。只有当我尝试使用它超大型时，通过在afterLoad回调中扩展Fancybox，它不起作用...可以看看吗？ – maartenmachiels

是啊，所以这里有一个新的版本，后加回调 - http://jsfiddle.net/8cwgpwdk/14/ – nir9

谢谢你！你可以看看这里http://jsfiddle.net/RyTcS/？出于某种原因，您的示例不会将图像100％的视口，并且不会将其设置为覆盖... – maartenmachiels

有没有必要使用FancyBox作为你想要做的事情是非常简单的只用jQuery。

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

这里是一个固定版本（现在能对移动）： http://jsfiddle.net/8cwgpwdk/11/

来源

2015-08-17 16:37:54 nir9

谢谢！这使它非常好，很轻便。希望在FancyBox aswel中看到解决方案，因为我想使用它的下一个/上一个功能。也许甚至标题aswel。但这是一个很好的起点。谢谢！！ – maartenmachiels

此外，提出的解决方案在手机上提供了一些不可靠的行为。我看到一个快速闪光，但图像不会持续。尽管它在桌面（Chrome）上可以使用。 – maartenmachiels

是啊，那是因为我没有为移动设备优化它，所以我在这里做了一个固定版本：http://jsfiddle.net/8cwgpwdk/11/ – nir9

ItemSlide + Fancybox Supersized（从功能内启动Fancybox）

回答

相关问题