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

【问题标题】：Using Fancybox version 2 - When Closing 2nd fancybox reopen first fancybox instead of simply closing使用 Fancybox 版本 2 - 关闭第二个 fancybox 时重新打开第一个 fancybox 而不是简单地关闭
【发布时间】：2014-01-13 14:43:43
【问题描述】：

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

我想从我的主页打开一个花式框，但在第一个花式框内可以调用第二个花式框。但是当第二个花哨的盒子关闭时。我希望它重新打开第一个花式框，而不是简单地关闭（在角落按 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>

谢谢:)

【问题讨论】：

标签： html fancybox

【解决方案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的内容如何，上面的脚本都会在关闭second fancybox后触发first fancybox。

更新：我添加了DEMO here

【讨论】：

似乎不起作用，当我关闭第二个花哨的盒子页面时，它会变黑......请帮助我已经完成了你在这里所说的一切，替换了课程。改变了 $(".fancybox").fancybox();到 $(".fancybox1").fancybox();并添加了 $(".fancybox2").fancybox({ afterClose: function(){ $(".fancybox1").trigger("click"); } });在主页上的 fancybox1... $(".fancybox1").fancybox({ $(".fancybox2").fancybox({ afterClose: function(){ $(".fancybox1").trigger("click") ; } }); });
看来你搞混了，看我的更新，我添加了一个DEMO。随意分析和比较源代码。花式框脚本应该只在主页上。第一个和第二个 html 文件的链接和内容有所不同。