ch.Zoom

Description

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

How-to

// Create a new Zoom.
var zoom = new ch.Zoom([selector], [options]);

// Create a new Zoom with a defined width (half of the screen).
var zoom = new ch.Zoom({
    'width': (ch.viewport.width / 2) + 'px'
});

Parameters

• selector - String : A CSS Selector to create an instance of ch.Zoom.
• options - Object : Options to customize an instance.
  • addClass - String : CSS class names that will be added to the container on the component initialization.
  • fx - String : Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "none".
  • width - String : Set a width for the container. Default: "300px".
  • height - String : Set a height for the container. Default: "300px".
  • shownby - String : Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "pointerenter".
  • hiddenby - String : Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "pointerleave".
  • reference - String : It's a CSS Selector reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
  • side - String : The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "right".
  • align - String : The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "top".
  • offsetX - Number : Distance to displace the target horizontally. Default: 20.
  • offsetY - Number : Distance to displace the target vertically. Default: 0.
  • position - String : The type of positioning used. Its value must be "absolute" or "fixed". Default: "absolute".
  • method - String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
  • params - String : Params like query string to be sent to the server.
  • cache - Boolean : Force to cache the request by the browser. Default: true.
  • async - Boolean : Force to sent request asynchronously. Default: true.
  • waiting - String | HTMLElement : Temporary content to use while the ajax request is loading. Default: 'Loading zoom...'.
  • content - HTMLElement | String : The content to be shown into the Zoom container.

Extends

• ch.Layer

Properties

.Component#name String

The name of a component.

.container HTMLDivElement

The popover container. It's the element that will be shown and hidden.

.Layer#name String

The name of the component.

.Popover#name String

The name of the component.

.trigger HTMLElement

The popover trigger. It's the element that will show and hide the container.

.uid Number

A unique id to identify the instance of a component.

.Zoom#name String

The name of the component.

Methods

.constructor()

Returns a reference to the constructor function.

.destroy()

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

.constructor()

Returns a reference to the constructor function.

.show(content, options) → {layer}

Shows the layer container and hides other layers.

• content - String | HTMLElement : The content that will be used by layer.
• options - Object : A custom options to be used with content loaded by ajax.
  • method - String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
  • params - String : Params like query string to be sent to the server.
  • cache - Boolean : Force to cache the request by the browser. Default: true.
  • async - Boolean : Force to sent request asynchronously. Default: true.
  • waiting - String | HTMLElement : Temporary content to use while the ajax request is loading.

// Shows a basic layer.
layer.show();

// Shows a layer with new content
layer.show('Some new content here!');

// Shows a layer with a new content that will be loaded by ajax with some custom options
layer.show('http://domain.com/ajax/url', {
    'cache': false,
    'params': 'x-request=true'
});

.constructor()

Returns a reference to the constructor function.

.destroy() → {popover}

Destroys a Popover instance.

// Destroy a popover
popover.destroy();
// Empty the popover reference
popover = undefined;

.disable() → {popover}

Disables a Popover instance.

// Disable a popover
popover.disable();

.enable() → {popover}

Enables a Popover instance.

// Enable a popover
popover.enable();

.height(data) → {Number|popover}

Sets or gets the height of the container.

• data - String : Set a height for the container.

// Set a new popover height
component.height('300px');

// Get the current popover height
component.height(); // '300px'

.hide() → {popover}

Hides the popover container and deletes it from the body.

// Close a popover
popover.hide();

.isShown() → {Boolean}

Returns a Boolean specifying if the container is shown or not.

// Check the popover status
popover.isShown();

// Check the popover status after an user action
$(window).on(ch.onpointertap, function () {
    if (popover.isShown()) {
        alert('Popover: visible');
    } else {
        alert('Popover: not visible');
    }
});

.refreshPosition() → {popover}

Updates the current position of the container with given options or defaults.

// Update the current position
popover.refreshPosition();

// Update the current position with a new offsetX and offsetY
popover.refreshPosition({
    'offestX': 100,
    'offestY': 10
});

.show(content, options) → {popover}

Shows the popover container and appends it to the body.

• content - String | HTMLElement : The content that will be used by popover.
• options - Object : A custom options to be used with content loaded by ajax.
  • method - String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
  • params - String : Params like query string to be sent to the server.
  • cache - Boolean : Force to cache the request by the browser. Default: true.
  • async - Boolean : Force to sent request asynchronously. Default: true.
  • waiting - String | HTMLElement : Temporary content to use while the ajax request is loading.

// Shows a basic popover.
popover.show();

// Shows a popover with new content
popover.show('Some new content here!');

// Shows a popover with a new content that will be loaded by ajax with some custom options
popover.show('http://domain.com/ajax/url', {
    'cache': false,
    'params': 'x-request=true'
});

.width(data) → {Number|popover}

Sets or gets the width of the container.

• data - String : Set a width for the container.

// Set a new popover width
component.width('300px');

// Get the current popover width
component.width(); // '300px'

.constructor()

Returns a reference to the constructor function.

.destroy() → {zoom}

Destroys a Zoom instance.

// Destroy a zoom
zoom.destroy();
// Empty the zoom reference
zoom = undefined;

.hide() → {zoom}

Hides the zoom container and the Seeker.

// Close a zoom
zoom.hide();

.loadImage() → {zoom}

Adds the zoomed image source to the tag to trigger the request.

// Load the zoomed image on demand.
component.loadImage();

.show(content, options) → {zoom}

Shows the zoom container and the Seeker, or show a loading feedback until the zoomed image loads.

• content - String | HTMLElement : The content that will be used by dropdown.
• options - Object : A custom options to be used with content loaded by ajax.
  • method - String : The type of request ("POST" or "GET") to load content by ajax. Default: "GET".
  • params - String : Params like query string to be sent to the server.
  • cache - Boolean : Force to cache the request by the browser. Default: true.
  • async - Boolean : Force to sent request asynchronously. Default: true.
  • waiting - String | HTMLElement : Temporary content to use while the ajax request is loading.

// Shows a basic zoom.
zoom.show();

// Shows a zoom with new content
zoom.show('Some new content here!');

// Shows a zoom with a new content that will be loaded by ajax with some custom options
zoom.show('http://domain.com/ajax/url', {
    'cache': false,
    'params': 'x-request=true'
});

Events

'destroy'

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'

Emits when a component is enabled.

// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});

'imageload'

Event emitted when the zoomed image is downloaded.

// Subscribe to "imageload" event.
zoom.on('imageload', function () {
    alert('Zoomed image ready!');
});

'ready'

Event emitted when the component is ready to use.

// Subscribe to "ready" event.
zoom.on('ready', function () {
    // Some code here!
});