Question

I am trying to make a script that allows me to open one fancy box and on closing that box a new fancy box will open or fadein…

When i click on the following link then it opens the fancybox that contains a video and i want when i close it the it opens up the fancybox that appear when i click on the demo link.

<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a>

DEMO: When i click on the following link then it opens a fancybox with some demo information.

<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI>

Following is my piece of code but i don’t know why its closed section didn’t open the another fancybox. Kindly help…….

jQuery(document).ready(function() {     

        $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

        $("#various2").fancybox({
            'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none',

                'onClosed'  :   function() {
                            $('#faier').fadeIn(10);

                },
                'onStart'       :   function() {
                                            document.getElementById('iframe-video');

                            //alert("hi");
                            //$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
                }
        });

Answer 1

use this as your js:

jQuery(document).ready(function() {     

$("a#example4").fancybox({
        'opacity'       : true,
        'overlayShow'   : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none'
    });

$("#various2").fancybox({
    'opacity'       : true,
        'overlayShow'   : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',

        'onClosed'  :   function() {
                    $('#faier').fancybox().trigger('click');
        },
        'onStart'       :   function() {
                                    document.getElementById('iframe-video');

                    //alert("hi");
                    //$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
        }
});