Class: ImageEnlargeWidget

PR. ImageEnlargeWidget

The Image Enlarge widget wraps an image tag and applies a click/tap behaviour whereby the image enlarges to the confines of the page.

The image will attempt to enlarge to the largest size that it can. The widget applies the enlarged image as a modal with a dark, semi-transparent background. The enlarged image can be dismissed with a click on either the image or the backdrop.

The widget requires a data-src which refers to the image to enlarge and should wrap an <img> tag. Note that the source of the widget image can differ from the image it wraps which would allow different size/resolution images to be used.

HTML Parameters

The following parameters are required.

data-widget="ENLARGE_IMAGE" Required
The identifier for the widget type.
data-src="{{string}}" Required
The source of the image to enlarge.

The following parameter is recommended.

id="{{id}}" Optional
It is usually preferable to include a unique ID but it is not strictly necessary.

Example

Enlarge Image Implementation

In this example the source of the images are the same but it is not required.

id Optional
A unique id for the HTML element.
data-widget="ENLARGE_IMAGE" Required
Widget specifier.
data-src="{{url}}" Required
The source of the enlarged image.
<div id="uniqueid1" data-widget="ENLARGE_IMAGE" data-src="../assets/slides/img-103.jpg" >
  <img id="uid1" src="../assets/slides/img-103.jpg" />
</div>
Author:
  • Appstudio Widgets
Source:
  • widgets/ImageEnlargeWidget.js, line 2

Extends

  • PR.BaseWidget

Members

backgroundModal_HTMLDivElement

The div for the background modal layer.

Source:
  • widgets/ImageEnlargeWidget.js, line 68

elHTMLImageElement

The actual image the user can select. The popup image has to zoom in from this image.

Source:
  • widgets/ImageEnlargeWidget.js, line 95

gutterNumber

Space around the popup image so that it's sticking to the viewport when it starts to scale in and scale out.

Source:
  • widgets/ImageEnlargeWidget.js, line 101

imageHTMLImageElement

Holds the pop up image.

Source:
  • widgets/ImageEnlargeWidget.js, line 89

pageContainerHTMLDivElement

Holds the DOM element of the div containing the whole page, directly in the tag. The css class name is 'page'.

Source:
  • widgets/ImageEnlargeWidget.js, line 83

srcString

The url for the image to load.

Source:
  • widgets/ImageEnlargeWidget.js, line 62

Methods

addInteractionEvents_( )

Add touch/mouse event handlers when the widget is on screen.

Source:
  • widgets/ImageEnlargeWidget.js, line 473

animateScaleIn( )

Animates the popup image scaling down on to the original image.

Source:
  • widgets/ImageEnlargeWidget.js, line 431

animateScaleOut( )

Animates the popup image scaling up to display a popup.

Source:
  • widgets/ImageEnlargeWidget.js, line 446

calculateScaleIn( ) → {String}

Calculates the initial scale and position of the pop up. The position is same as the original image.
Returns the transform the needs to be applied on the pop up image.

Returns:
String
Source:
  • widgets/ImageEnlargeWidget.js, line 366

calculateScaleOut( ) → {String}

Calculates the end scale out and position of the pop up. Maintain the aspect ratio and add a gutter so that
it's not sticking to the boundaries of the viewport.
Returns the transform the needs to be applied on the pop up image.

Returns:
String
Source:
  • widgets/ImageEnlargeWidget.js, line 389

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/ImageEnlargeWidget.js, line 112

onDocumentClick_( event )

Handler triggered when the user taps on the screen to remove the pop up image. Animate the pop up image
back to the original image and remove the background modal/popup.

Parameters:
Name Type Description
event MouseEvent
Source:
  • widgets/ImageEnlargeWidget.js, line 195

removeInteractionEvents_( )

Remove touch/mouse event handlers when the widget is off screen.

Source:
  • widgets/ImageEnlargeWidget.js, line 480

removeModalPopup( )

Removes the modal popup from the page container.

Source:
  • widgets/ImageEnlargeWidget.js, line 466
Top