ch.Zoom (Class)

Documentation updated on Fri May 18 2012 12:47:11 GMT-0300 (GMT-03:00), generated by JsDoc Toolkit 2.4.0

Overview

Zoom shows a contextual reference to an augmented version of main declared image.

• Constructor name: ch.Zoom(conf)
• ch.Zoom extends ch.Floats.
• View source on GitHub.

Summary

Classdetail

Parameters

• conf: Object, Optional. Object with configuration properties.
• conf.fx: Boolean, Optional. Enable or disable fade effect on show. By default, the effect are disabled.
• conf.context: Boolean, Optional. Sets a reference to position of component that will be considered to carry out the position. By default is the anchor of HTML snippet.
• conf.points: String, Optional. Sets the points where component will be positioned, specified by configuration or "lt rt" by default.
• conf.offset: String, Optional. Sets the offset in pixels that component will be displaced from original position determined by points. It's specified by configuration or "20 0" by default.
• conf.message: String, Optional. This message will be shown when component needs to communicate that is in process of load. It's "Loading zoom..." by default.
• conf.width: Number, Optional. Width of floated area of zoomed image. Example: 500, "500px", "50%". Default: 350.
• conf.height: Number, Optional. Height of floated area of zoomed image. Example: 500, "500px", "50%". Default: 350.

Returns

• itself

Requires

• ch.Positioner
• ch.onImagesLoads

See

• ch.Modal
• ch.Tooltip
• ch.Layer

Properties detail

$loading (private, Object)

Element showed before zoomed image is load. It's a transition message and its content can be configured through parameter "message".

element (public, HTMLElement)

Reference to a DOM Element. This binding between the component and the HTMLElement, defines context where the component will be executed. Also is usual that this element triggers the component default behavior.

offset (private, Object)

Position of main anchor. It's for calculate cursor position hover the image.

original (private, Object)

Reference to main image declared on HTML code snippet.

ratio (private, Object)

Relative size between zoomed and original image.

seeker (private, Object)

Visual element that follows mouse movement for reference to zoomed area into original image.

that (private, itself)

Reference to an internal component instance, saves all the information and configuration properties.

type (public, string)

This public property defines the component type. All instances are saved into a 'map', grouped by its type. You can reach for any or all of the components from a specific type with 'ch.instances'.

uid (public, number)

The 'uid' is the Chico's unique instance identifier. Every instance has a different 'uid' property. You can see its value by reading the 'uid' property on any public instance.

zoomed (private, Object)

Reference to the augmented version of image, that will be displayed into a floated element.

Methods detail

content (public, HTMLIMGElement)

Gets the Float component content.

// Get the defined content
me.content();

Returns

• (HTMLIMGElement)

See

• ch.Object#content

height (public)

Sets or gets the height property of the component's layout. Use it without arguments to get the value. To set a new value pass an argument, could be a Number or CSS value like '100' or '100px'.

// Gets height of Zoom float element.
foo.height();

// Sets height of Zoom float element and update the seeker size to keep these relation.
foo.height(500);

Returns

• itself

See

• ch.Floats#size

hide (public)

Triggers the innerHide method and returns the public scope to keep method chaining.

// Following the first example, using 'me' as modal's instance controller:
me.hide();

Returns

• itself

See

• ch.Floats#hide

innerHide (protected)

Inner hide method. Hides the component's layout and detach it from DOM tree.

Returns

• itself

innerShow (protected)

Inner show method. Attach the component's layout to the DOM tree and load defined content.

Returns

• itself

isActive (public)

Returns a Boolean if the component's core behavior is active. That means it will return 'true' if the component is on and it will return false otherwise.

Returns

• boolean

move (private)

Calculates movement limits and sets it to seeker and augmented image.

Parameters

• event: Event. Mouse event to take the cursor position.

position (public)

Sets or gets positioning configuration. Use it without arguments to get actual configuration. Pass an argument to define a new positioning configuration.

// Change default position.
$("a").zoom().position({
	offset: "0 10",
	points: "lt lb"
});

// Refresh position.
$("a").zoom().position("refresh");

// Get current position.
$("a").zoom().position();

See

• ch.Object#position

show (public)

Triggers the innerShow method and returns the public scope to keep method chaining.

// Following the first example, using 'me' as modal's instance controller:
me.show();

Returns

• itself

See

• ch.Floats#show

size (protected)

Getter and setter for size attributes of float that contains the zoomed image.

Parameters

• prop: string. Property that will be setted or getted, like "width" or "height".
• data: string, Optional. Only for setter. It's the new value of defined property.

Returns

• itself

width (public)

Sets or gets the width property of the component's layout. Use it without arguments to get the value. To set a new value pass an argument, could be a Number or CSS value like '300' or '300px'.

// Gets width of Zoom float element.
foo.width();

// Sets width of Zoom float element and updates the seeker size to keep these relation.
foo.width(500);

Returns

• itself

See

• ch.Floats#size

Events detail

hide (public)

Triggers when component is not longer visible.

me.on("hide",function () {
	otherComponent.show();
});

See

• ch.Floats#event:hide

ready (public)

Triggers when the component is ready to use (Since 0.8.0).

// Following the first example, using 'me' as zoom's instance controller:
me.on("ready",function () {
	this.show();
});

show (public)

Triggers when component is visible.

me.on("show",function () {
	this.content("Some new content");
});

See

• ch.Floats#event:show