1

使用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>

谢谢 ：）

4

1 回答 1

3

您可以创建两个脚本，每个链接一个，因此在main您拥有的页面中：

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

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

$(".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

更新：我在这里添加了一个演示

于 2012-06-11T02:24:18.953 回答