1

FancyBox jquery question

If you close it by pressing X I would like to get an alert("you forgot something..").

How can i do this?

            $("a#uploadImage").fancybox({
            'titleShow'     : false,
            'width':    560,
            'height':   620,
            'autoDimensions': false,
            'overlayOpacity': 0.6
            });

4 Answers 4

6

there is a callback 'onCleanup', so:

$("a#uploadImage").fancybox({
    'titleShow'     : false,
    'width':    560,
    'height':   620,
    'autoDimensions': false,
    'overlayOpacity': 0.6m,
    'onCleanup' : function() {
        return window.confirm('Close?');
    }
});
3
  • this works! how can i alert 'Okay!' if they choose Yes in the confirm box
    – Johnson
    Commented Oct 26, 2010 at 7:41
  • Not like im going to do that. Just so i know where I should have my other code.
    – Johnson
    Commented Oct 26, 2010 at 18:17
  • ok :) well, you can have var x = confirm('Close?'); x will have the value true if the user pressed ok, false otherwise. and just use that value :)
    – Claudiu
    Commented Oct 26, 2010 at 19:58
5

The default function is $.fancybox.close so I might be inclined to do something like...

$.fancybox.originalClose = $.fancybox.close;
$.fancybox.close = function() {
    // Do whatever you want. Then do the default behavior:
    $.fancybox.originalClose();
};

It's something of a hack, but it has the advantages of not requiring any modification to the library code or to the original markup, not requiring you to directly manipulate event handlers that the library is defining, and automatically invoking your code regardless of how the box gets closed.

To change the behavior for only one specific box, the best thing is to set the modal property to true (which will disable all the built-in methods for closing the box), and then you can add your own "Save" or "Close" button that works however you want. The box will never close automatically, but you can close it when you're ready to with the $.fancybox.close() function.

5
  • 2
    One of the defining characteristics of JavaScript is that functions are just data. You can put them in variables, put them in other variables, overwrite them with other functions, and generally toy with them the same way you might toy with a string or an object. It's one of the language's most powerful features, when used properly. Commented Oct 23, 2010 at 14:10
  • Thanks for the answer. Where should i have this? together with my fancybox configuration at the document ready function? Did i mention i only want this for a specific fancybox? Please see updated Question for my fancybox configuration. Thank you
    – Johnson
    Commented Oct 24, 2010 at 12:13
  • Ah. You didn't mention changing this for only one specific box on the page. I've edited my answer to provide a much more direct solution in that case. Commented Oct 24, 2010 at 16:04
  • I set modal to true, now I cant close it, there's no X icon either. How should I make one there, and configure so a alert box comes up ?
    – Johnson
    Commented Oct 26, 2010 at 7:03
  • The point of a modal box is that it doesn't have an X. Put a close button inside and call $.fancybox.close() when you're ready to close it. Commented Oct 26, 2010 at 12:45
2

The only way I see it, take out the default closing button and put one instead.

<a href="#" id="close_fancybox"><img src="x.png" /></a>

<script>
    $('#close_fancybox').click(function(){
        var confirmation = confirm("You forgot something...?");
        if(confirmation) {
              return false;
        } else {
              $.fancybox.close();
              return false;
        }
    });
</script>
6
  • how can i take out the default one, and how can i place it the same place?
    – Johnson
    Commented Oct 23, 2010 at 13:44
  • actually, I just realised, you don't need to take out the default one, you can use the id of the default one, which is "fancybox-close", so instead of $('#close_fancybox') just use $('#fancybox-close')
    – Claudiu
    Commented Oct 23, 2010 at 13:47
  • The trouble is that the original event handler (the one the library defines) will still also be active, and in fact will probably run before your new handler does. To actually be able to cancel closing the box, you'd need to remove that handler (or remove the corresponding markup entirely). Commented Oct 23, 2010 at 13:58
  • So it wouldn't work with the original id... :( @OP: to remove the original close link, you can simply add display:none in the css if searching through the .js for it seems to hard, altough that's recommended
    – Claudiu
    Commented Oct 23, 2010 at 14:03
  • Shouldnt need to. You could clear the event with .unbind onComplete and reload right afterwards with what you have. Heres an example on what im talking about stackoverflow.com/questions/1927845/jquery-override-event <-- the post by SeanJA Then in the call function -> $("a#uploadImage").fancybox({ 'onComplete': $('#close_fancybox').unbind.click(function(){....}
    – Matt
    Commented Oct 24, 2010 at 16:12
0

Open jquery.fancybox-1.3.2.js and go to Line number 910 you can see the close function for fancy box.At that place

$.fancybox.close = function() {

    alert("hai");

    if (busy || wrap.is(':hidden')) {

        return;
    }
3
  • Uhg. Please don't advocate modifying library code. It makes the library difficult to upgrade, and it makes your changes difficult to find (and thus difficult to maintain). Commented Oct 23, 2010 at 13:52
  • @ VoteyDisciple see the user457827 comment to Claudiu;user wants like that only
    – svk
    Commented Oct 23, 2010 at 13:54
  • No, the original poster wants to achieve a certain result. Directly editing library code is not the way to do that. Commented Oct 23, 2010 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.