Zoom

Documentation updated on February 7th.

Description

The Zoom widget is a member of Floats familiy. It shows a contextual reference to an augmented version of a main declared image.

Demo

Roll over the HTML5 logo to see a demo:

Code snippet

An anchor <a> referencing to an augmented image, wrapping the original image in a <img> tag, like this:

<a href="zoomed-image" id="example">
 	<img src="original-image" alt="HTML5 power!" />
</a>

Instance component

This is the way to create a new Zoom:

var foo = $("#example").zoom();

As any Floats children, the Zoom has a few uses cases you can use to modifiy and manipulate its size.

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").zoom({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Zoom API documentation.

Basics

Changing size

To change the width property to the Zoom container there is a method called width, also works as a getter and a setter at the same time. To get the property simply use the method without arguments, like this:

var width = foo.width(); // Get its width

To set the property add an argument to the method width, admits Numbers (200) or String  ("200px") as a CSS property. See an example:

foo.width(200); // Set its width

Exactly the same thing with the method heigth, admits Numbers (300) or String ("300px") as a CSS property. Get example:

foo.height(); // Get its height

Set height example:

foo.height(300); // Set its height

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Zoom API documentation.

Learn more about events on our step-by-step guide.