Clark Martz Clark Martz - 21 days ago 6
jQuery Question

Unable to close fancybox

I have the below code in my document. The fancybox opens with no issues, but I can't get it to close once open. Could anyone tell me what's wrong with my code?

<!DOCTYPE html>

<html
<head>
<meta charset="utf-8" />

<script type="text/javascript" src=".C:\Users\Clark\Google Drive\CM Site\FancyBox\jquery.fancybox.pack.js"></script>
<script type="text/javascript" src=".C:\Users\Clark\Google Drive\CM Site\FancyBox\jquery.easing-1.3.js"></script>
<script type="text/javascript" src=".C:\Users\Clark\Google Drive\CM Site\FancyBox\jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href=".C:\Users\Clark\Google Drive\CM Site\FancyBox\jquery.fancybox.css" type="text/css" media="screen" />

<a href="C:\Users\Clark\Google Drive\CM Site\Certifications.jpg" onClick="jQuery.fancybox.close();">Close window</a

</head>
<body>
<a class="fancybox" href="C:\Users\Clark\Google Drive\CM Site\Background_image.jpg"><img src="C:\Users\Clark\Google Drive\CM Site\Certifications.jpg" alt="" /></a>

</body>
</html>


Many thanks!!

Answer

When you use fancybox you will have script like this

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

If you want to have a close button on the top left, use

<script>
    $(document).ready(function() {
        $(".fancybox").fancybox({closeBtn: true);
    });
</script>

And if you want the user to click the fancybox to close it, add

<script>
    $(document).ready(function() {
        $(".fancybox").fancybox({closeBtn: true, closeClick: true);
    });
</script>

See docs here for more info on other options.

This is a better approach than wiring onClick() functions on individual elements.