how to just open a fancybox window (not onclick)

Question

I am triggering the fancybox to open onclick like this:

$('.telefonosOtrosPaises').fancybox({
                    'type'          :   'iframe',
                    'href'          :   'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
                     'transitionIn' : 'elastic',
                    'transitionOut' : 'elastic',
                    /*'easingIn'      : 'easeInOutBack',

                    'easingOut'     : 'easeInOutBack',   */
                     /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
                     onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
});

but how can i just open it in my js code when i need it?

could you go into your profile and Mark some Answers to your previous questions as right please. — meo, Dec 21 '11 at 12:36

score 7 · Accepted Answer · answered Dec 21 '11 at 12:34

7

Instead of calling .fancybox on an element, call it like this:

$.fancybox.open(...)

Note this is fancybox 2 syntax, although it might work with v1

If you want to have it open on both onclick and when prompted in your code, just call click on the element you've attached it to.

$('.telefonosOtrosPaises').click();

answered Dec 21 '11 at 12:34

Adam Hopkinson

28,281
7
65
99

Could you give some details about arguments! And how to ajax – famas23 Mar 22 '19 at 13:45

score 1 · Answer 2 · answered Mar 22 '13 at 12:28

This can be done very easily:

   <div id="divFancy" style="display: none;">
         FANCY BOX CONTENT GOES HERE
   </div>

    <script  type="text/javascript">
        $(document).ready(function () {
            $.fancybox({
                'href': '#divFancy'
            });
        });
    </script>

score 1 · Answer 3 · answered Dec 21 '11 at 12:35

1

you can just call yourControl.click() to simulate a click event.

That way you can call it whenever you want it :)

answered Dec 21 '11 at 12:35

Teun Pronk

1,367
12
24

score 1 · Answer 4 · answered Dec 21 '11 at 12:39

According to Fancybox's blog, you can try something like this:

$.fancybox(
    $('.telefonosOtrosPaises'), 
    {
        'type'          :   'iframe',
        'href'          :   'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
         'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        /*'easingIn'      : 'easeInOutBack',

        'easingOut'     : 'easeInOutBack',   */
         /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
         onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
    }
);

themhz · Answer 5 · 2011-12-21T12:41:38.080

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(document).ready(function() {
    $('#target').click(function() {  
        $('.telefonosOtrosPaises').fancybox({
                        'type'          :   'iframe',
                        'href'          :   'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp',
                         'transitionIn' : 'elastic',
                        'transitionOut' : 'elastic',
                        /*'easingIn'      : 'easeInOutBack',

                        'easingOut'     : 'easeInOutBack',   */
                         /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/
                         onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})}
        });
    });
});
</script>

<input type="button" id="target" value="press me"/>
</body>
</html>

how to just open a fancybox window (not onclick)

5 Answers5

Linked