• Flowplayer
• jQuery Tools
• Login
• Logout

Usage

The general way to setup overlay is as follows:

  // select one or more elements to be overlay triggers
  $(".my_overlay_trigger").overlay({
 
  // one configuration property
  color: '#ccc',
 
  // another property
  top: 50
 
  // ... the rest of the configuration properties
  });

When you click on one of the triggers it will open an overlay that is being specified by the trigger's rel attribute. Look at the minimal setup to get started quickly.

Demos

You can study the workings of overlay in the following examples. Each contains documented source code, along with a standalone page to allow you to easily transfer the examples to your own site. The most important example is the first one, "Minimal setup for overlay".

• Minimal setup for overlay
• The apple effect for overlay
• Creating modal dialogs with overlay
• Opening overlays programmatically
• Overlays with different styles
• Loading external pages into overlay
• Multiple overlays on the same page
• Creating a customized overlay effect

Combining overlay with Flowplayer

These demos provide some examples of how to use overlay and Flowplayer together.

• The basics of overlaying videos
• Custom fullscreen action in overlays
• E-mail and embed features in overlays

overlay Graphics

You can use our graphics as the basis for your design. You can freely change the design as you see fit. Click the image on the right to download a zip file. Before using the graphics, you should consult the User's Guide on how graphics can be used when designing the look and feel of the tools.

Here are a few examples of what is included in the zip file:

Configuration

Here is a list of all available configuration options:

Events

Make sure you have read about Events in jQuery Tools. All event listeners receive the Event Object as the first argument and there are no other arguments for Overlay.

Scripting API

First make sure you have familiarized yourself with jQuery Tools scripting. Here is a list of all available API methods:

Defining custom close elements

By default, a close button is auto-generated as the first element inside the container. Here is the generated HTML:

  <!-- auto- generated close button -->
  <div class="close"></div>

You can easily add more closing elements inside the overlay simply by assigning the CSS class name "close" to them. These elements can be styled and positioned any way you like inside the overlay.

If you supply a value for the close configuration variable, the close element is not auto-generated and you need to define the closing element(s) yourself.

Making custom effects

If you want to make custom effects you should use the $.tools.overlay.addEffect method. This method is "static", meaning that you don't have to have the overlay API (or instance) already loaded. You can add effects before any overlays are initialized.

This method accepts three arguments. The first argument is the effect name, the second argument is the function that performs the required functionality for loading the overlay and the third argument is a function that closes the overlay. You can use this method to modify existing effects or add new ones. Here is the official default effect taken directly from the source code of the overlay tool:

  // adds an effect called "myEffect" to the overlay
  $.tools.overlay.addEffect("myEffect", function(position, done) {
 
  /*
  - 'this' variable is a reference to the overlay API
  - here we use jQuery's fadeIn() method to perform the effect
  */
  this.getOverlay().css(position).fadeIn(this.getConf().speed, done);
  },
 
  // close function
  function(done) {
 
  // fade out the overlay
  this.getOverlay().fadeOut(this.getConf().closeSpeed, done);
  }
  );

As you can see it is fairly easy to implement effects. Inside the functions the this variable is a pointer to the scripting API. This gives you access to various parts of the overlay elements.

The loading function receives two arguments. The first argument position defines the top and left properties given in the configuration. The second argument is a callback function that must be called after you have performed your loading effect.

The done callback received as an argument must be called after you have performed you effect. The reason for this is that many times those effects perform animations that have a certain duration. We must know when these animations are finished so that the onLoad and onHide events are really called after the overlay is completely shown or hidden.

Note: if you are using jQuery's animate, fadeIn or fadeOut methods the done function can simply be given to this method as the last argument. jQuery will take care of it after the animation finishes. Otherwise you must call done.call().

Here is one custom overlay effect demo.

• report a bug »
• 
• What's new in v1.2.6 »