Clark Martz Clark Martz - 1 year ago 90
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>

<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

<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>


Many thanks!!

Answer Source

When you use fancybox you will have script like this

    $(document).ready(function() {

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

    $(document).ready(function() {
        $(".fancybox").fancybox({closeBtn: true);

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

    $(document).ready(function() {
        $(".fancybox").fancybox({closeBtn: true, closeClick: true);

See docs here for more info on other options.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download