Cloud Zoom API

The Cloud Zoom JavaScript API allows developers to interact with Cloud Zoom and add additional functionality.

Class CloudZoom

This is the main CloudZoom class.

Creating an Instance

You can create your own instances like this:

options = {}; // This would be your options object.
$('#myImage').CloudZoom(options);                  // jQuery way.
myInstance = new CloudZoom($('#myImage'),options); // 'normal' way.

Getting an Instance

You can get the Cloud Zoom instance that belongs to a particular image:

myInstance = $('#myImage').data('CloudZoom');

Calling Methods

Once an instance has been obtained, call methods like this:

myInstance.loadImage('/smallimage.jpg','/largeimage.jpg');
myInstance.destroy();

Calling Static Methods

Call static methods like this:

CloudZoom.someStaticMethod();

Handling Cloud Zoom Events

Bind handlers to Cloud Zoom events like this:

$('#myImage').bind('cloudzoom_ready',function(){alert('Cloud Zoom is ready!')});

Method Summary
Method Attributes	Method Name and Description
	apiTest Test API call.
	closeZoom Closes the zoom window if visible.
	destroy Removes Cloud Zoom from the image.
	loadImage Loads a new image into a Cloud Zoom instance
<static>	CloudZoom. .quickStart Quick start function for Cloud Zoom
	refreshImage Refresh image function.
<static>	CloudZoom. .setAttr Sets the attribute name to use for defining Star Zoom options in HTML.

Event Summary
Event Attributes	Event Name and Description
<static>	CloudZoom.cloudzoom_ready() Fired when a images have loaded succesfully.

Class Detail

CloudZoom($image, options)

Parameters:
{jQuery} $image: jQuery image element to zoom.
{Object} options: Options object.

Method Detail

apiTest()

Test API call. Alerts a test message confirming that the API is working.

closeZoom()

Closes the zoom window if visible.

destroy()

Removes Cloud Zoom from the image.

loadImage(imagePath, zoomImagePath)

Loads a new image into a Cloud Zoom instance

Parameters:
{string} imagePath: Path to small image.
{string} zoomImagePath: Path to zoom image.

<static> CloudZoom.quickStart()

Quick start function for Cloud Zoom

refreshImage()

Refresh image function. Call if image changes size (e.g. fluid layouts). From version 2.1 rev 1211291557, this is called automatically on hover.

<static> CloudZoom.setAttr(attr)

Sets the attribute name to use for defining Star Zoom options in HTML.
Default is data-cloudzoom.

This can be useful when you don't want to use HTML5 style data attributes.
For instance, you could set the attribute name to 'rel' or 'onclick'

Parameters:
{String} attr: The name of the attribute.

Event Detail

<static> CloudZoom.cloudzoom_ready()

Fired when a images have loaded succesfully.

<static> CloudZoom.cloudzoom_start_zoom()

Fired when zooming starts (from 3.0 rev 1306101336).

<static> CloudZoom.cloudzoom_end_zoom()

Fired when zooming ends (from 3.0 rev 1306101336).