Q:

Fancybox 2 beforeLoad and afterClose not firing to hide/show a div when active

I'm trying to use beforeLoad and afterClose in Fancybox 2.
I need to hide a flash animation in an iFrame - which is inside the #elanceiframe div - while Fancybox is open and showing a portfolio and then show the div again on Fancybox close. 
That's because the iFrame doesn't respect z-index in IE and is not "faded out" by Fancybox and is in the foreground alongside the Fancybox images. So I want to display:none the #elanceiframe div while Fancybox is running.
This is the fancybox init function and it runs the portfolio OK, but beforeLoad and afterClose don't fire.
$(document).ready(function() {
   $("a[data-fancybox-group=portfolio]").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'overlayColor' : '#000',
    'overlayOpacity' : 0.7,
    'beforeLoad' : function(){
       $("#elanceiframe").css('display', 'none');
     },
    'afterClose': function() {
       $("#elanceiframe").css('display','block');
     } 
   });
});

Am I using beforeLoad and afterclose correctly?
Do I need CSS on the #elanceiframe div like display:none to begin with?
Edit 12/04/13
The above example works fine; I was calling the wrong div in the function :(

A:

The options in your code 
beforeLoad: function () {
    $("#elanceiframe").css('display ', 'none');
},
afterClose: function () {
    $("#elanceiframe").css('display ', 'block ');
}

look good to me. 
You could even play manipulating the values of the src attribute of the iframe so your document won't jump as it would with display: none like 
var thesrc;
$(".fancybox").fancybox({
    beforeLoad: function () {
        thesrc = $("#elanceiframe").attr("src");
        $("#elanceiframe").attr("src", "");
    },
    afterClose: function () {
        $("#elanceiframe").attr("src", thesrc);
    }
});

See JSFIDDLE. BTW, some of your API options are for fancybox v1.3.x and won't work with v2.x. Check the docs for the right options : http://fancyapps.com/fancybox/#docs 

