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>
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');
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With