# Mojo.Widget.ImageView

## Namespace Detail

### Overview

This widget is designed to view an image full screen with support for zooming and panning, while optionally moving between additional images. You can use this for single images, or flick left and right through a series of images. You can assign handlers through the `onLeftFunction` and `onRightFunction` model properties and listen for `mojo-imageViewChanged`; from the handlers, use the methods `leftUrlProvided(url)`, `rightUrlProvided(url)`, and `centerUrlProvided(url)` to build a scrolling list of images.

### Declaration

>     <div x-mojo-element="ImageView" id="ImageId" class="ImageClass" name="ImageName"></div>

Properties | Required | Value | Description
--- | --- | --- | ---
x-mojo-element | Required | ImageView | Declares the widget as type 'ImageView'.
id | Required | Any String | Identifies the widget element for use when instantiating or rendering.
class | Optional | Any String | Provide your own unique class and override the framework's styles.
name | Optional | Any String | Adds a unique name to the ImageView widget; generally used in templates.

### Events

>     Mojo.Event.listen(this.controller.get("ImageId"), Mojo.Event.imageViewChanged,
>       this.handleUpdate);

Event Type | Value | Event Handling
--- | --- | ---
Mojo.Event.imageViewChanged | event.url | event fires when image in view changes

### Instantiation

>     this.controller.setupWidget("ImageId",
>       this.attributes = {
>           noExtractFS: true
>       },
>       this.model = {
>           onLeftFunction: this.onLeft.bind(this),
>           onRightFunction: this.onRight.bind(this)
>       }
>     );

### Attribute Properties

Attribute Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
highResolutionLoadTimeout | Number | Optional | 1.2 | Time to wait before switching photo to high res.
extractfsParams | String | Optional | "800:800:3" |
lowResExtractFSParams | String | Optional | "160:160:3" |
noExtractFS | Boolean | Optional | false | Flag to prevent looking up a high res version.
limitZoom | Boolean | Optional | false | Flag to prevent or limit zooming.
panInsetX | Number | Optional | 0 |
panInsetY | Number | Optional | 0 |

### Model Properties

Model Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
onLeftFunction | Function | Optional | None | Called after a left transition.
onRightFunction | Function | Optional | None | Called after a right transition.

### Methods

To invoke a method on a widget, use the scene controller's `get` method for the desired widget, and append `mojo` followed by the method.

Example:

>     this.controller.get('myWidget').mojo.getValue()

Method | Arguments | Description
--- | --- | ---
getCurrentParams | None | Returns the current zoom level and focus [0,1].
manualSize | width, height | Manually sizes the widget.
leftUrlProvided | filepath or url | Tells the widget to use this image as the left.
rightUrlProvided | filepath or url | Tells the widget to use this image as the right.
centerUrlProvided | filepath or url | Tells the widget to use this image as the center.