Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancy box not opening iFrame second time

first post - Hello! I use fancybox (Fancybox homepage) to display modal windows. I'm trying to display a hidden div with an iFrame inside of this div. Works great. The second time you click the link, it doesn't load the iFrame (not a 404 error, just there is no content in the iFrame). Can anyone help?

The important bits:

<script type="text/javascript">
function openIframeLink() {
    $.fancybox({
        'type'          : 'inline',
        'href'          : '#data'
    });
};
</script>

And the HTML:

<div id="hiddenElement">
    <iframe id="data" src="frames/frame4.php" width="100%" height="300"></iframe>
</div>
like image 728
Djave Avatar asked Feb 23 '11 12:02

Djave


2 Answers

Had this same problem. Based on Frode's assessment that it was stripping the src attribute, I added the 'onClosed' callback on my fancybox call and was able to add it back in:

jQuery('#iframe_element').fancybox({
    'onClosed': reloadIframe
});

function reloadIframe() {
    jQuery('#iframe_element').attr('src','http://example.com');
}
like image 91
Brian Wentzloff Avatar answered Sep 28 '22 07:09

Brian Wentzloff


It looks like fancybox extracts the iframe element from the DOM and puts it into it's own container. Then, when you close the fancybox, it attempts to insert it back where it originally was - but manages to loose the src attribute value.

The fancybox guy's approved method of opening an iframe seems to be the following.

<a id="mylink" class="iframe" href="frames/frame4.php">mylink</a>
<script type="text/javascript">
    $("#mylink").fancybox();
</script>

One way to circumvent it, is to clone the iframe element, i.e.

function openIframeLink() {
    $.fancybox( {content: $('#data').clone()} );
}

Obviously not ideal.. I'd love hear someone more familiar chime in.

like image 44
Frode Avatar answered Sep 28 '22 08:09

Frode