Fancybox - Implementing afterClose callback

Dave Bar picture Dave Bar · Mar 26, 2013 · Viewed 15.4k times · Source

My javascript syntax is rookie-level, but I'm learning :>

I'm using Fancybox 2.1.4 to reveal an inline <div id="content">. Traditionally, the <div> would be set to style="display:none" and Fancybox will change that to block when activated, and back to none when closed.

In my case, I actually have the content of that <div> visible on the page in a different location (it's the right thing for the project, I know there are various opinions that can be had there).

So I need to keep <div id="content"> from disappearing after closing the fancybox (which it natively disappears).

After some research, I found that using the afterClose callback, I can simply change or add the inline style of id"content" to display:block (which solves the problem.

The problem... is my rookiness :> I tried for quite a long time and just not sure where to put the code, and the right syntax.

How would i add that afterClose to my fancybox function?

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox(
        );
    }); 
</script>

Thanks very much for any assist

Answer

JFK picture JFK · Mar 26, 2013

This is the format :

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
           afterClose : function(){
             // here any javascript or jQuery to execute after close
           }
        }); // close fancybox
    }); // close ready
</script>