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?
Try calling $j.fancybox.close();
rather than $j.fn.fancybox.close();