A node that is used for displaying the zoomed in preview image.

If this node does not exist in the document at the time that the zoom in effect for the instance is to be initiated, then it will be automatically cloned from the preview implied node and injected into the preview implied node's parent node, so that it exists as a peer to the preview node.

NOTES

A node that is used for displaying a low resolution version of the zoomed in preview image.

If this node does not exist in the document at the time that the zoom in effect for the instance is to be initiated, then it will be automatically cloned from the preview implied node and injected into the preview implied node's parent node, so that it exists as a peer to the preview node.

NOTES

A floating point number in the range of 0 to 1, representing the horizontal alignment of the zoomed in image.

A value of 0 indicates that the zoomed in image is aligned so that its leftmost side is visible, a value of 1 indicates that the zoomed in image is aligned so that its rightmost side is visible, and a value of .5 indicates that the zoomed in image is aligned so that its center horizontally is visible. The value of this property is automatically updated during user interaction with the instance (ie. when the inUse set-get property is set to true).

NOTES

A floating point number in the range of 0 to 1, representing the vertical alignment of the zoomed in image.

A value of 0 indicates that the zoomed in image is aligned so that its topmost side is visible, a value of 1 indicates that the zoomed in image is aligned so that its bottommost side is visible, and a value of .5 indicates that the zoomed in image is aligned so that its center vertically is visible. The value of this property is automatically updated during user interaction with the instance (ie. when the inUse set-get property is set to true).

NOTES

An integer, specifying the thickness of the margin at the edges of the preview image where moving the mouse will produce no change in the values of either - or both - of the alignX and alignY set-get properties.

When the deadMargin property is set to a value greater than 0, there will be a dead margin around the edges of the preview image. When the mouse moves into this dead margin, further mouse movements may produce no change in the values of the alignX and alignY set-get properties. In other words, panning may be inactive inside this margin. When inside the horizontal dead margin (near the left and right edges), horizontal panning becomes inactive. Similarly, when inside the vertical dead margin (near the top and bottom edges), vertical panning becomes inactive.

The purpose of the dead margin is to allow the user to pan horizontally and vertically around the zoomed in image without having to move the mouse perilously close to the edge of the preview image and risk snapping out of the zoomed in experience because the mouse accidentally moves outside of the preview image. When there is a dead margin set, the effective region for controlling the panning is smaller than the actual preview image port, by twice the amount of the deadMargin property's value - for each axis.

The value that you set for this property should consider the dexterity and mouse coordination ability of a typical user. That said, for smaller preview images it may be necessary to lower the value of this property, so that the active region isn't so small that tiny mouse movements produce large panning movements.

NOTES

A read-only floating point number, in the range of 1 to the value of the zoomPower set-get property, indicating the currently displayed zoom power.

When the zoom in effect is initiated, the value of this property will be faded from 1 to the value of the zoomPower set-get property, over the duration specified by the duration property of the zoomFadeProperties object.

NOTES

A boolean, indicating whether or not the zoom in effect is in use.

When the user rests their mouse over the instance's preview and triggers the zoom in effect, the value of this property will change to true. The value of this property may also be programmatically set to true in order to initiate the zoom in effect.

NOTES

A string, specifying the URL for the preview image.

If the value of this property is undefined, null, or '' (an empty string) at the time that the instance is wired up, then its value will be set automatically from the value of the src property of the preview implied node. When the value of this property is changed and the instance is wired, the UI of the instance will be updated to reflect the new value.

NOTES

A string or function, specifying the URL of the image that should be used for the zoomed in preview.

When a function reference is specified for this property, then the function will be called as an instance method on the instance, each time before the zoom in effect is initiated. This gives the function the opportunity to calculate a URL based upon the state of the instance - especially the value of the previewUrl set-get property, which may have been modified since the last time that the zoom in effect was initiated. Consider the following example...

EXAMPLE

page.addChild (
  'collectionItem',
  Uize.Widget.CollectionItem.Zooming,
  {
    previewZoomUrl:
      function () {return this.get ('previewUrl').replace ('100x100','250x250')},
    zoomPower:2.5
  }
);

In the above example, the zoomed in preview URL is being derived from the value of the previewUrl set-get property. By specifying a function for previewZoomUrl, the code that derives the zoomed in preview URL will be executed each time the zoom in effect is initiated. In this case, the code is expecting the value of the previewUrl property to always contain the dimensions string '100x100', which is replaced with the string '250x250' to produce the URL for the zoomed in preview.

NOTES

A read-only boolean, indicating whether or not the zoomed in preview is being shown.

NOTES

An object, specifying properties that should be used for the Uize.Fade instance that drives the zoom in effect's animation.

The properties of the zoomFadeProperties object can be any of the set-get properties supported by the Uize.Fade class. For example, if you wanted a zoom in animation that had some bounce, then you could specify a value for this property that was an object with a curve property whose value was a curve function, as in the following example...

EXAMPLE

page.addChild (
  'collectionItem',
  Uize.Widget.CollectionItem.Zooming,
  {
    previewZoomUrl:
      function () {return this.get ('previewUrl').replace ('100x100','250x250')},
    zoomPower:2.5,
    zoomFadeProperties:{
      curve:Uize.Curve.Rubber.easeOutBounce (),
      duration:1000
    }
  }
);

NOTES

A floating point number, specifying the number of times larger the zoomed in image is than the normal preview.

A NOTE ON RESIZING

Ideally, for whatever value is specified for this property, the image specified by the previewZoomUrl set-get property should be the same number of times bigger than the image specified by the previewUrl set-get property.

So, for example, if zoomPower is set to the value 2, and if the image specified by the previewUrl property has dimensions of 200x150, then the image specified by previewZoomUrl should ideally be 400x300. When this is not the case, then the browser will be scaling the zoomed in image to dimensions that are not its natural dimensions, and the quality of the shrinking or stretching will depend on the image resizing mechanism of the browser. Some browsers do a better job than others, but resizing done in the browser never looks all that great in the best of cases.

NOTES