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
            });
Johnson
  • 818
  • 4
  • 21
  • 39

4 Answers4

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?');
    }
});
Janis
  • 8,593
  • 1
  • 21
  • 27
  • this works! how can i alert 'Okay!' if they choose Yes in the confirm box – Johnson Oct 26 '10 at 07:41
  • Not like im going to do that. Just so i know where I should have my other code. – Johnson Oct 26 '10 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 Oct 26 '10 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.

VoteyDisciple
  • 37,319
  • 5
  • 97
  • 97
  • 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. – VoteyDisciple Oct 23 '10 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 Oct 24 '10 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. – VoteyDisciple Oct 24 '10 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 Oct 26 '10 at 07: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. – VoteyDisciple Oct 26 '10 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>
Claudiu
  • 3,261
  • 1
  • 15
  • 27
  • how can i take out the default one, and how can i place it the same place? – Johnson Oct 23 '10 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 Oct 23 '10 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). – VoteyDisciple Oct 23 '10 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 Oct 23 '10 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 http://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 Oct 24 '10 at 16:12
  • Didnt work matt. @Claudiu where should i have the html ? – Johnson Oct 26 '10 at 07:07
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;
    }
svk
  • 4,513
  • 18
  • 63
  • 100
  • 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). – VoteyDisciple Oct 23 '10 at 13:52
  • @ VoteyDisciple see the user457827 comment to Claudiu;user wants like that only – svk Oct 23 '10 at 13:54
  • No, the original poster wants to achieve a certain result. Directly editing library code is not the way to do that. – VoteyDisciple Oct 23 '10 at 13:56