How To Just Open A Fancybox Window (not Onclick)

August 21, 2024 Post a Comment

I am triggering the fancybox to open onclick like this: $('.telefonosOtrosPaises').fancybox({ 'type' : 'iframe', 'href'

Solution 1:

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

Solution 2:

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

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

Solution 3:

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

Solution 4:

This can be done very easily:

<divid="divFancy"style="display: none;">
         FANCY BOX CONTENT GOES HERE
   </div><scripttype="text/javascript">
        $(document).ready(function () {
            $.fancybox({
                'href': '#divFancy'
            });
        });
    </script>

Solution 5:

<html><head><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head><body><scripttype="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><inputtype="button"id="target"value="press me"/></body></html>

JavaScript OfficialSite