If you run a website where it is necessary to highlight information or content, such as displaying a video, then you will most likely find a need to make the background less of a distraction. Such an effect is used very well by some TV companies, when they display content for playback via the Internet—it's akin to switching the lights off, when you want to watch a good movie.
Expose is a tool that can help here. It exposes or highlights a particular element, and fades out the others, so that you can only see what the website owner intended. There is a quirk though with this tool. Normally you would not use this on its own, but as part of the Overlay tool featured earlier in this book. However, Expose has been developed to take this concept further, and work as a standalone tool or one integrated into Overlay. It doesn't matter in which mode it is used but you can use it to expose all manner of objects, such as images, forms, or Flash objects. We're going to use it to show off a video. Before doing so, lets take a look at it in a little more detail.
jQuery Tools' Expose is very easy to configure, although its versatility means that you can use it to great effect in a number of ways:
// place a white mask over the page
$(document).mask();
// place a custom colored mask over the page
$(document).mask("#789");
// place a non-closable mask - this effectively makes it a modal mask
$(document).mask{ closeOnEsc: false, closeOnClick: false });
// place a mask but let selected elements show through (expose)
$("div.to_be_exposed").expose();
// close the mask
$.mask.close();
Note
The default color for .mask is white, this can be overridden by specifying a HTML color as shown in the preceding second example, or you can use the color attribute within your call to Expose/Mask.
Now, the observant among you will notice that there were calls to two different functions in the preceding code; this is because there are effectively two different ways to expose content: using mask and expose.
The mask function will only be available for the document object. It does not work with any other selector. This means that if you want to use it to show off elements contained in a DIV, for example, then you will need to use the expose function. All elements returned by the expose selector will be placed on top of the mask.
The mask function (which loads immediately after the expose or mask call) can use different configurations on each call; if a configuration is not specified, then it will automatically use the last configuration supplied in the previous call. By default, the tool is set to use any element if its ID is set to exposeMask, although you can alter the configuration to specify your own if you are using this ID for some other purpose.
As we will see in the demo, mask and expose both need to be closed and their configurations destroyed, before a new one can be created with new attributes that are different to the existing mask or expose.
One of the great features of jQuery Tools is that its components can easily be combined with others in the library, or be extended with the use of additional jQuery. One such example, which we are going to look at, is the use of Expose with Overlay. This demo will take you through how you can combine the two to great effect. This borrows from a fine example, which is available from the main jQuery Tools website.
This demo will use the Overlay functionality, similar to that used in Chapter 2, Getting along with your UI Tools, along with the "Flowplayer" video tool, available from http://www.flowplayer.org.
Lets begin by setting up the basic structure for the video content. This is very similar to the projects we looked at earlier in the book, although you will note the inclusion of "Flowplayer":
<!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> <script src="flowplayer-3.2.6.min.js"></script> <!-- standalone page styling (can be removed) --> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> <script> </script> </head> <body> </body> </html>
Note
Flowplayer is written by Tero Piirainen, who is also the main developer of jQuery Tools. You can download a free version of the excellent video tool from http://flowplayer.org/download/index.html.
Now that we have a basic structure in place, we need to start adding in some content. The following code sets up the trigger that fires off the overlay, followed by the overlay that contains the video to be displayed. Note that you can include multiple examples on the same page, while the Overlay tool can be customised to use different overlay backgrounds; the Expose tool is known as a singleton. This means that a single instance and configuration is shared for every usage, no matter how many times it is used.
<h2>Multiple overlay demo</h2> <p> <button rel="#overlay1">Video 1</button> <button rel="#overlay2">Video 2</button> </p> <!-- overlays for both videos --> <div class="overlay" id="overlay1"> <a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> </a> </div> <div class="overlay" id="overlay2"> <a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> </a> </div>
The next stage is to add in the all-important styling—there is no great deal needed, and most of it is needed for the Overlay to function properly:
<style>
.overlay { background:url(white.png) no-repeat; padding:40px; width:576px; display:none; }
.close {
background: url(close.png) no-repeat;
position: absolute;
top: 2px;
display: block;
right: 5px;
width: 35px;
height: 35px;
cursor: pointer;
}
a.player { display:block; height: 450px; }
</style>
The final step involved is to add the script that makes the overlay and video work:
$(function() {
// setup overlay actions to buttons
$("button[rel]").overlay({
// use the Apple effect for overlay
effect: 'apple',
expose: '#789',
onLoad: function(content) {
// find and load the player contained in the overlay
this.getOverlay().find("a.player").flowplayer(0).load();
},
onClose: function(content) {
$f().unload();
}
});
// install flowplayers
$("a.player").flowplayer(
"http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
});
If all is well, you should see something like this:
Let's now have a look at the final component in the Toolbox part of the library, which is mousewheel.