1

Thanks to this answer, I have a way of launching a fancybox iframe on page-load: http://www.casedasole.it/fancybox/A.html

This answer shows how to open a fancybox iframe whose content is encoded in javascript in the page that launches the iframe: http://www.casedasole.it/fancybox/B.html

Is there some way of having B do what A does - i.e. launch itself on page-load?

NB: The hidden div approach (see here) won't work because I need to be able to navigate within the iframe once opened.

Community
  • 1
  • 1
plugincontainer
  • 630
  • 2
  • 9
  • 28

1 Answers1

1

Just do :

var myContent = "..."; // html as option "B"

jQuery(document).ready(function ($) {
    $.fancybox({
        // API options as "B"
        // build the iframe
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        afterShow: function () {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(myContent);
            iframeDoc.close();
        }
    });
}); // ready

See JSFIDDLE

Notice the myContent variable contains the full html structure, including DOCTYPE, <html>, <head> an <body> sections. Although it's not mandatory, it will give you more control over the settings of your initial (iframed) page.

Also notice in my jsfiddle I separated the base content (html basic structure) from the custom content (the <div> as in your example) for tidiness purposes ;)

Refs :

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thanks, does the job: http://www.gattapelata.it/fbox/ But one problem - how to prevent the iframe being closed by a click on the overlay? If I use modal: true, the close-click is blocked, but the close "X" (fancybox_sprite.png) disappears as well. – plugincontainer Oct 31 '14 at 20:55
  • I got it: afterLoad: function () { $('.fancybox-skin').append(''); }, - don't know why but, with modal:true, that fixes the problem – plugincontainer Oct 31 '14 at 21:10
  • @plugincontainer closing fancybox after clicking the overlay is the default behavior but can change it like http://stackoverflow.com/a/8404587/1055987 If `modal` is set to `true`, it will disable navigation and closing default buttons – JFK Oct 31 '14 at 21:11
  • helpers : { overlay : {closeClick: false}}, worked too. Thanks again! – plugincontainer Oct 31 '14 at 21:16