absentx absentx - 3 months ago 21
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:

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

JFK JFK
Answer

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