Question

使用http://fancyapps.com/fancybox/#support提供的Fancybox版本2

我想从我的主页打开一个fancybox，但在第一个花哨的盒子里可以调用第二个fancybox。但当第二个奇特的盒子关闭时。它不是简单地关闭（在角落按X或按Esc），而是希望它重新打开第一个花式框。我该怎么做？

谢谢 - 我在互联网上搜索了一个答案，但找到了关于我的查询的答案，适用于以前版本的fancybox而不是新版本（2.0）......

我的代码如下：

主页 -

<!DOCTYPE html>
<head>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="./source/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() {
            /*
                Simple image gallery. Uses default settings
            */

            $('.fancybox').fancybox();

            /*
                Different effects
            */

            // Change title type, overlay opening speed and opacity
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedIn : 500,
                        opacity : 0.95
                    }
                }
            });


            /*
                Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
            */

            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : { 
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });
});
</script>
    <a href="1stFancyBox.html" class="fancybox fancybox.ajax">1st Fancy Box</a>
</html>

1stFancyBox.html -

<html>
<a href="2ndFancyBox.html" class="fancybox fancybox.ajax">2nd FancyBox</a>
</html>

2ndFancyBox.html -

<html>
<body>
Hellloooooooooo</body>
</html>

谢谢：）

Answer 1

您可以创建两个脚本，每个链接一个脚本所以在main页面中你有：

<a href="1stFancyBox.html" class="fancybox1 fancybox.ajax">1st Fancy Box</a>

请注意，类现在是fancybox1 ...然后脚本会触发第一个fancybox。

$(".fancybox1").fancybox();

在1stFancyBox.html内，您可以拥有此链接

<a href="2ndFancyBox.html" class="fancybox2 fancybox.ajax">2nd FancyBox</a>

请注意，班级现在是fancybox2

同样在main页面中添加触发第二个fancybox的脚本（来自第一个fancybox）：

$(".fancybox2").fancybox({
 afterClose: function(){
  $(".fancybox1").trigger("click");
 }
});

无论2ndFancyBox.html的内容如何，上面的脚本都会在关闭第二个花式框之后触发第一个花式框。

更新：我添加了DEMO here

使用Fancybox版本2 - 当关闭第二个fancybox重新打开第一个fancybox而不是简单地关闭

1 个答案: