CODEWITHSUNDEEP
javascriptjqueryfancybox
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

how to just open a fancybox window (not onclick)

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?

Upvotes: 4

Views: 20799

Answers (5)

xyzzy.rad
xyzzy.rad

Reputation: 51

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>

Upvotes: 1

themhz
themhz

Reputation: 8424

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

Upvotes: -1

Ayman Safadi
Ayman Safadi

Reputation: 11552

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'})}
    }
);

Upvotes: 1

Teun Pronk
Teun Pronk

Reputation: 1399

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

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

Upvotes: 1

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

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();

Upvotes: 7

Related Questions