javascript - How do I put additional content into fancybox iframe - Stack Overflow

admin管理员组

文章数量:1289877

I am having trouble figuring out how to put some additional content into an iframe I am displaying with fancybox.

My basic setup:

$('.fancybox').fancybox({
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe',
    'padding': 0,
    'closeClick': false,
    helpers: {
        overlay: {
            closeClick: false
        }
    }

<a class="fancybox" href =""/><img src="myimage.jpg" width="x" height="y" /></a>

So I need to put a couple of custom buttons and another javascript widget in under the iframe but on top of the background overlay.

I am just having trouble grasping what might be the best way to do this. I suppose I could put this content in a div and then display that div once the fancybox has pleted loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.

I am having trouble figuring out how to put some additional content into an iframe I am displaying with fancybox.

My basic setup:

$('.fancybox').fancybox({
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe',
    'padding': 0,
    'closeClick': false,
    helpers: {
        overlay: {
            closeClick: false
        }
    }

<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>

So I need to put a couple of custom buttons and another javascript widget in under the iframe but on top of the background overlay.

I am just having trouble grasping what might be the best way to do this. I suppose I could put this content in a div and then display that div once the fancybox has pleted loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.

• javascript
• jquery
• fancybox
• fancybox-2

Share Improve this question Follow edited Mar 25, 2013 at 13:45 thecodedeveloper. 3,24055 gold badges3939 silver badges6969 bronze badges asked Jul 18, 2012 at 22:27 absentxabsentx 1,42744 gold badges1818 silver badges3232 bronze badges 2

• what version of fancybox? because you are using options from v1.3.x and v2.x and they are not patible with each other. – JFK Commented Jul 18, 2012 at 23:23
• ahh good point! I am using version 2. – absentx Commented Jul 19, 2012 at 0:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

if using fancybox v2.x try with the call back afterShow to append the additional content to the .fancybox-inner selector like :

afterShow: function(){
 var customContent = "<div class='customHTML'>My custom content</div>"
 $('.fancybox-inner').append(customContent);
}

use CSS to style and position such additional content, e.g.

.customHTML {
 position: absolute; 
 z-index: 99999; /* this place the content over the fancybox */
 bottom: 0px;
 right: 0;
 background: #f2f2f2;
 width: 200px;
 height: 100px;
 display: block;
}

If the iframe is from same domain then you can access the contents with contents()

$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');

This will not be possible for cross domain cases.

If your case also require javascript widgets to be injected, that might be hard for you with injecting into DOM, you can better go for a different div shown along with iframe.

For that just make the div show up on onComplete event or onStart event, and then position it according to fancybox position, height etc.

To make it above overlay, give it some positioning, you should obviously, and give a higher z-index that overlay.

#fancybox-overlay {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1100;
}
#mydiv{
    position:absolute;
    z-index:1101;
    }

You can try data attributes (data-fancybox-title) and initialize fancybox to place it to the top like this:

$(".fancybox-video").fancybox({
  helpers : {
    title: {
      type: 'inside',
      position: 'top'
    }
  }
});

<a href="#" class="fancybox-video" data-fancybox-title="<h1>Title</h1><div>Other stuff</div>" data-fancybox-type="iframe" data-fancybox-href="https://www.youtube./XXXXX"></a>

You can find more info here: Fancybox Instructions

I needed a solution for FancyBox 1.3 and in my case I used the onComplete event to update the contents

<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>

   $("#fancybox-preview-card").fancybox({
        'height': screen.availHeight * 0.9,
        'width' : 600,
        'onComplete' : updatePreviewContent,
        'overlayShow': false
    });

...

var contentUpdated = false;

function previewEcardTemplate() {
    contentUpdated = false;
    $("#fancybox-preview-card").attr("href", "about:blank").trigger("click");

}

function updatePreviewContent() {
    // if content has already been updated then back out 
    if (contentUpdated)
        return;

    contentUpdated = true;

    $.get('/template/mytemplate.htm', function (data) {
        // Any mods to the html can go here
        var ifrm = document.getElementById('fancybox-frame');
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
        ifrm.document.open();
        ifrm.document.write(data);
        ifrm.document.close();
    })

}

本文标签： javascriptHow do I put additional content into fancybox iframeStack Overflow