0

我试图同时使用超大尺寸和花式盒子。我在 supersized.js 中添加了一些 html，以便在每张幻灯片中显示带有 fancybox 的图像，在默认标题框中，即 div id=slidecaption。

一切正常，但是当fancybox打开/关闭时，我试图停止并重新启动超大幻灯片。

此代码可以很好地停止幻灯片：

<script type="text/javascript">
jQuery(document).ready(function(){
$('#slidecaption').click(function() {
api.playToggle();
});
});
</script>

但是当我关闭fancybox时，我找不到重新开始幻灯片放映的方法。有 div class=fancybox-overlay，但我重复上面的代码：

<script type="text/javascript">
jQuery(document).ready(function(){
$('.fancybox-overlay').click(function() {
api.playToggle();
});
});
</script>

.....没有任何作用。

你觉得更容易些吗？

非常感谢

4

2 回答 2

0

尝试在您的 fancybox 自定义初始化中使用 fancybox 回调，例如：

$(".fancybox").fancybox({
    beforeLoad: function () {
        api.playToggle(); // stop / pause
    },
    afterClose: function () {
        api.playToggle(); // restart
    }
});
于 2013-10-31T17:06:38.953 回答
0

使用这个链接（http://jsfiddle.net/RyTcS/）希望它对你很有帮助。

 $(".fancybox")
 .attr('rel', 'gallery')
.fancybox({
    padding    : 0,
    margin     : 5,
    nextEffect : 'fade',
    prevEffect : 'none',
    afterLoad  : function () {
        $.extend(this, {
            aspectRatio : false,
            type    : 'html',
            width   : '100%',
            height  : '100%',
            content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
        });
     }
  });
于 2013-10-31T07:59:05.927 回答