CODEWITHSUNDEEP
javascriptjqueryfancyboxfancybox-2
absentx
absentx

Reputation: 1417

How do I put additional content into fancybox iframe

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 completed loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.

Upvotes: 2

Views: 9835

Answers (4)

Eugen
Eugen

Reputation: 11

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.com/XXXXX"></a>

You can find more info here: Fancybox Instructions

Upvotes: 1

RadarBug
RadarBug

Reputation: 807

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

}

Upvotes: 0

JFK
JFK

Reputation: 41143

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

Upvotes: 5

sabithpocker
sabithpocker

Reputation: 15566

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

Upvotes: 2

Related Questions