Styling the mask with a background image

Expose demo 2 / 5 : Styling the mask with a background image

Click on the ball to see a highly visual exposing experience! The background image can really make a difference.

Mask styling

Our mask has a custom background color and image. It is horizontally centered and vertically positioned so that it will match the center of the exposed ball.

#mask {
	background:#072a88 url(/tools/img/expose/mask_star_1600px.jpg) no-repeat 50% 0;
}

The background image is a JPG image with a fixed background color. In the expose graphics zip we also have a PNG version of the "star" which can be used together with any background color. Of course the PNG version has a much larger file size because it has alpha transparency.

HTML coding

The ball is centered and its initial width has been shrunken a bit. Its original width is 298 pixels.

<div style="margin:0 auto;width:300px">
	<img src="http://static.flowplayer.org/tools/img/expose/ball_large.png" id="ball" style="width:130px" />
</div>

JavaScript coding

Here we setup exposing for the ball image. We have two callback functions that perform the growing/shrinking animation. The click event is a normal jQuery event and inside that you'll get the handle to the exposing API with $(this).expose().load();.

The document height is larger after the ball size has grown. We use the fit()< method to resize the mask to fill the whole document after the ball has been resized.

// setup exposing
	$("#ball").expose({

		// a custom mask ID
		maskId:'mask',

		// grow the ball when exposing starts
		onBeforeLoad: function() {
			this.getExposed().animate({width: 298});
		},

		// shrink the ball when exposing closes
		onBeforeClose: function() {
			this.getExposed().animate({width: 130});
		}, 
		
		// our ball animation makes the document larger. this will resize the mask accordingly
		onLoad: function() {
			this.fit(); 
		}


	// perform exposing when image is clicked
	}).click(function()  {
		$(this).expose().load();
	});