Question

I’m using the Overlay plugin from jQuery Tools: http://flowplayer.org/tools/overlay/index.html to display a full size image when a link is clicked, but the overlay is displayed immediately and shows the image loading.
I’d like to change this behavior and wait until the image is loaded before launching the overlay. The Overlay plugin has an onBeforeLoad property to which a callback function can be attached. But, of course, the overlay display resumes as soon as this callback is executed, and will not wait for the image load event to be fired.

The plugin has a few API methods, but they don’t seem very helpful for my purpose.
In my example below, the two lines I’ve commented out should give you an idea of what I thought might work, but doesn’t.

Here’s a simplified test case: http://jsfiddle.net/GlauberRocha/9jkU5/

Any idea?

var $trigger = $("#trigger"),
    api;

$trigger.overlay({
    fixed: true,
    mask: {
        color: "#000",
        opacity: .8
    },
    onBeforeLoad: function() {
        console.log("onBeforeLoad");
        api = $trigger.data("overlay"); // see http://flowplayer.org/tools/overlay/index.html "Scripting API"
        //api.close(); // Temporarily "close" the overlay?
        setTimeout(function() { // This will be replaced by the image load event
            console.log("Waiting is over!");
            //api.load(); // Load the overlay now?
        }, 2000);
    },
    onLoad: function() {
        console.log("onLoad");
    }
});

Answer 1

I’ve modified my code. This version seems to work (see http://jsfiddle.net/GlauberRocha/rwtvK/). The main difference comes from the way the API method is called ($trigger.overlay().load() vs $trigger.data("overlay").load()). This inconsistency is present in the jQuery Tools docs and examples.

$(function () {
  var $trigger = $("#trigger");
  $trigger.overlay({
    fixed: true,
    mask: {
      color: "#000",
      opacity: .4
    },
    onBeforeLoad: function () {
      if (typeof this.init === "undefined") {
        this.init = true;
        setTimeout(function () { // This will be replaced by the image load event handler
          console.log("OK, let's show it!");
          $trigger.overlay().load(); // Load the overlay
        }, 5000);
        console.log("Not now!");
        return false;
      }
    }
  });
});