Class: PictureZoomWidget

PR. PictureZoomWidget

The Picture Zoom widget creates an element that displays a large image within a smaller viewport and allows panning and zooming interactions as well as opening the image in a new tab (which also allows panning and zooming).

Zooming is supported on touch devices via pinching/flaring gestures whilst a double tap opens the image in a new tab.

The widget requires an interior <img> element to be specified which is a preview image which is displayed while the image in data-src is still being loaded, as the image can be zoomed and moved around it is potentially a very large image although a preview image is required even if a smaller image size is being used.

HTML Parameters

The following parameters are required.

data-widget="PICTUREZOOM" Required
The identifier for the widget type.
data-src="{{string}}" Required
The image to use inside the picture zoom widget.

The following parameters are optional.

id="{{id}}" Optional
It is highly recommended to include a unique ID but it is not strictly necessary.
data-allow-fullscreen="{{boolean}}" Optional
true || false Specifies that a double tap opens the image in a new tab, the image used is referenced by data-src.
data-panning="{{boolean}}" Optional
true || false Specifies that the image can be panned (moved).
data-zoom="{{boolean}}" Optional
true || false Specifies that the image is zoomable via a pinch/flare gesture.

Example

Basic Implementation
This example provides a simple pan-only implementation.

data-widget="PICTUREZOOM" Required
The identifier for the widget type.
data-src="{{string}}" Required
The image to use
data-panning="true" Required
Specifies that panning is on.
<div id="uniqueid1"
  data-widget="PICTUREZOOM"
  data-panning="true"
  data-src="../assets/image.jpg">
 <!-- Required preview image -->
 <img id="uniqueid2"  src="../assets/preview-image.jpg"/>
</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/PictureZoomWidget.js, line 2

Extends

  • PR.BaseWidget

Members

doubleTapTimer_

Holds the unique string for timer. The timer is created to simulate a double tap on the tablet as it is not
natively supported right now.

Source:
  • widgets/PictureZoomWidget.js, line 86

elString

Holds the div element that acts as the widget.

Source:
  • widgets/PictureZoomWidget.js, line 130

imageHTMLImageElement

Holds the image element to which zoom/pan/fullscreen is applied.

Source:
  • widgets/PictureZoomWidget.js, line 143

imageContainerDivHTMLDivElement

Div container that holds the main image. We will actually scroll and apply any effects to this container internally.

Source:
  • widgets/PictureZoomWidget.js, line 149

imageOffsetXNumber

The offset in the x-direction for the image to appear when it loads initially.

Default Value:
  • 0
Source:
  • widgets/PictureZoomWidget.js, line 156

imageOffsetYNumber

The offset in the y-direction for the image to appear when it loads initially.

Default Value:
  • 0
Source:
  • widgets/PictureZoomWidget.js, line 163

isAllowFullScreenBoolean

Specifies if the image can go full screen. We will notify the app to display this image in fullscreen.

Default Value:
  • fasle
Source:
  • widgets/PictureZoomWidget.js, line 137

isZoomstring

Is this zoomable?

Source:
  • widgets/PictureZoomWidget.js, line 188

pageSwipe_Boolean

Holds if a pageSwipe can occur during this gesture

Source:
  • widgets/PictureZoomWidget.js, line 113

panstring

Is this pannable?

Source:
  • widgets/PictureZoomWidget.js, line 182

previewImageHTMLImageElement

Holds a reference of the preview image.

Source:
  • widgets/PictureZoomWidget.js, line 176

screenX_Number

Temp var to ascertain a swipe or double tap gesture

Source:
  • widgets/PictureZoomWidget.js, line 101

startX_Number

Temporary varialbe to hold the x position on a tap. Used to simulate the double tap effect on ipads.

Source:
  • widgets/PictureZoomWidget.js, line 75

startY_Number

Temporary varialbe to hold the y position on a tap. Used to simulate the double tap effect on ipads.

Source:
  • widgets/PictureZoomWidget.js, line 81

swipeDist_Number

The distance to travel to be considered a swipe and not a tap

Source:
  • widgets/PictureZoomWidget.js, line 107

swipePos_Number

Temp var to ascertain page swipe at edges of pannable area

Source:
  • widgets/PictureZoomWidget.js, line 92

Methods

createIScroll( )

Creates the iScroll object that controls most functionality of the widget

Source:
  • widgets/PictureZoomWidget.js, line 407

initialize( element )

Acts like a constructor, this function triggered by default when you create an object.

Parameters:
Name Type Description
element

The HTML DOM Element which acts like a slideshow.
Throws:
Error HTML Element not attached.
Source:
  • widgets/PictureZoomWidget.js, line 198

initVars_( )

Initialize the variables, fetch the attribute values from the mark up and assign them to instance variables.

Source:
  • widgets/PictureZoomWidget.js, line 233

resizeContainer_( )

Called when screen resizes or orientation changes.

Source:
  • widgets/PictureZoomWidget.js, line 498
Top