Question

I need the ability for Fancybox to be closed when a user clicks a link inside the fancybox.

I have tried:
href="javascript:$j.fn.fancybox.close();"
(note I am using jQuery with no conflict hence the $j) `

When I try it it does not work and I get an error in Firebug that says $j.fn.fancybox.close is not a function.

Note: I am using Fancybox version 1.3.4

Here is the script of the Fancybox:

<script type="text/javascript" >
    var $j = jQuery.noConflict();

    $j(document).ready(function(){

      $j("#start").fancybox({

    'padding' : 0
});

</script> 

HTML Code for Fancybox:

<div class="hide">
    <img src="/Images/skin/spacer1x1.png" onload="$j('#start').trigger('click');" />  
<a href="#welcome" id="start"></a>
    <img style="width:700px; height:600px;" id="welcome" usemap="#Map" alt="PLEASE VIEW PAGE WITH IMAGES ON" src="/Images/start/start.png" />
    <map id="Map" name="Map">
    <area alt="See Message Examples" href="/artistphotos/" coords="29,431,301,465" shape="rect" />
    <area alt="Enter Site" href="javascript:$j.fn.fancybox.close();" coords="436,433,567,464" shape="rect" />
    </map>
</div> 

Any ideas how to get this to work properly?

Answer 1

Try calling $j.fancybox.close(); rather than $j.fn.fancybox.close();