absentx absentx - 6 months ago 45
Javascript Question

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:

'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.


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>"

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;