Question

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.

Answer 1

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