Home/ Questions/Q 8077787
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:34:52+00:00

Using Fancybox version 2 supplied by http://fancyapps.com/fancybox/#support I want to open a fancybox from

  • 0

Using Fancybox version 2 supplied by http://fancyapps.com/fancybox/#support

I want to open a fancybox from my main page, but within that 1st fancy box a second fancybox can be called. But when that 2nd fancy box is closed. Rather than simply closing(pressing X in the corner or by pressing Esc) it I want it to reopen the first fancybox. How do I do this?

Thank you – I have searched the internet for an answer but found answers regarding my query applying to previous versions of fancybox not the new version (2.0)…

My code is below:

Main Page-

<!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>

Thanks 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could create two scripts, one for each link
    so in the main page you have:

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

    Notice that class is now fancybox1 … then the script tha fires the first fancybox.

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

    Inside 1stFancyBox.html you can have this link

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

    Notice that class is now fancybox2

    Also in the main page add the script that fires the second fancybox (from within the first fancybox):

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

    The script above will fire the first fancybox after closing the second fancybox regardless the content of 2ndFancyBox.html.

    UPDATE: I added a DEMO here

    • 0