close fancybox and open new one using functions

Question

I have an application where I am using Fancyboxes to display content from the server through IFRAMES within the Fancyboxes. So, I am looking to run a script after data is submitted or changed in the server that calls the current fancybox with IFRAME to close and open another fancybox with a new url, size, and iframe inside of it.

I have tried several different codes through various googled sites, but none have worked for my app.

Help would be greatly appreciated!

UPDATE: Found the answer here: http://www.amitpatil.me/fancybox-runtime-resizing-of-iframe/

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Call $.fancybox.close or parent.$.fancybox.close() (from iframe), and open a new one:

$.fancybox({            
'transitionIn'  : 'none',
'transitionOut' : 'none',
'width'     : 680,
'height'        : 495,
'href'      : 'http://example.com/new'
});

or simply resize fancybox: $.fancybox.resize(). This will help you in resizing: How do you resize Fancybox at runtime?

[UPDATE]

As I understand: You have A.php opened with fancybox. On A.php you probably have a form, and the form is submitted to B.php. If this is the situation, you have to close+open OR just resize the fancybox in the document.ready of B.php by parent.$.fancybox.function_name.

edited May 23 '17 at 12:12

Community

1
1

answered Oct 04 '11 at 19:43

Tamás Pap

17,777
15
70
102

thanks for the quick answers. I was searching for a resize at first, don't know why I didn't come across that link. – drummer392 Oct 04 '11 at 19:58
Glad to help you! If the answer was helping you solve the problem, please consider accepting the answer. – Tamás Pap Oct 04 '11 at 20:04
sorry, but just to get this straight, after my PHP actions are called and everything is sent to the database, I just call parent.$.fancybox.close() to close the fancybox, and then I place the other code in the parent page and it will automatically open a new fancybox? – drummer392 Oct 04 '11 at 20:06
that makes sense. I figured that would be the case. I like the resize option better either way. It's much cleaner! – drummer392 Oct 04 '11 at 20:23

score 0 · Answer 2 · answered Dec 15 '12 at 05:53

The method suggested by @TamasPap didn't work for me, and since I'd spent hours researching and experimenting until I finally found a method which worked, I wanted to share it.

parent.$.fancybox.open({ href : 'iframe2.html', type: 'iframe'});
parent.$.fancybox.close({ href : 'iframe1.html'});

You can specify any options, helpers or css after type: 'iframe' in the same manner you would when creating the function.

score 0 · Answer 3 · answered Oct 04 '11 at 19:37

0

Don't know if you've tried this, but seems to work for me:

parent.MyFunction(); // call this from the iframed url

function MyFunction(){ // have this in your parent page
    // call your fancybox close function here
}

answered Oct 04 '11 at 19:37

swatkins

13,530
4
46
78

close fancybox and open new one using functions

3 Answers3