Fancy box not opening iFrame second time

Question

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>

Speedometer

the fancy box is working, its a problem with ur url :) when do u call the openIframeLink() you only need fancy box once btw (i think) – Canary

Answer 1

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.

Telegraphone

Hi! Thank you so much. It didn't quite do what I wanted (probably my fault) but you showed me exactly enough to fix the problem. ` function openIframeLink() { /* Grab the src before fancybox loses it*/ theSrc = $("#data").attr('src'); $.fancybox({ 'type' : 'inline', 'href' : '#data', onClosed : function(){ $('#data').attr('src', theSrc); } }); };` --thank you so much! – Speedometer

Answer 2

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

Subsumption

Answer 3

Fancybox loses the src attribute. Here is a workaround I've been using ever since

function openIframeLink() { 
    /* Grab the src before fancybox loses it */ 
    theSrc = $("#data").attr('src'); 
    $.fancybox({ 
        'type'     : 'inline', 
        'href'     : '#data', 
        onClosed     : function()
        { 
            $('#data').attr('src', theSrc); 
        } 
    }); 
};

Speedometer

Answer 4

This is my way of recovering the src attribute, without knowing the element beforehand.

Might help someone..

$(".fancybox.iframe").each(function(){
    var target = $($(this).attr("href"));
    var src = target.attr("src");
    $(this).fancybox({
        'type': "inline",
        'content': target,
        'onClosed': function(){
            target.attr("src", src);
        }
    });
});

Rameau