Class: Image360Widget

PR. Image360Widget

The Image360 widget is a widget that is used to display a series of images. It’s primary usage is to create an effect whereby a swipe event (either touch or click-and-drag) causes the displayed image to update so that it appears that the user is spinning an object around. This is achieved by creating images of an object at different angles and specifying them in the markup whereby they are stacked by the widget and displayed sequentially to give the simulation of rotation or spinning.

As the widget simply collects images and organises them into a linear structure it can be used to play the images (or frames) in order to create a flip-book style animation effect. The markup would look the same, it is just the content of the images that would change.

The markup should specify the widget as the exterior (or wrapping) element, specify a <ul> element to hold the images and then specify all of the <li> element that represent the images. The content of the <li> elements need not be an image element though, anything can be placed inside the <li> elements. See the example.

Any number of frames can be specified, the widget will collect these and map them so that the swipe interaction will cycle through the frames from left to right to give a smooth transition through the frames.

The widget needs some styling to give it physical dimensions, usually this is accomplished by specifying the width and height on the container (the element specifying the widget).

HTML Parameters

The following parameters are required

data-widget="IMAGE360" Required
The identifier for the widget type.
class="image360" Required
Applies some required styling.

The following parameters are optional (defaults are listed in braces)

id="{{id}}" Optional
It is usually preferable to include a unique ID but it is not strictly necessary.
data-autoplay="{{false}}" Optional
true || false Specifies whether the widget should auto play
data-loop-count="{{1}}" Additionally Required
number Specifies the number of times the widget should auto loop

Example

Image360 HTML Specification

The following example shows the HTML structure for creating the Image360 widget. The 3 key ingredients are the wrapping element that specifies the widget, the ul element and the collection of li elements that house the content (usually these are images although this is not a requirement).

Inline styles have been added to the containing element for clarity but whilst the width and height is required to be specified it is recommended to do so in an external stylesheet.

<div id="uniqueid1"
     style="width:400px; height: 300px;"
     data-widget="IMAGE360"
     class="image360"
     data-autoplay="true"
     data-loop-count="1" >
  <ul>
    <li>
      <img src="./assets/image01" />
    </li>
    <-- Repeat li elements -->
  </ul>
</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/Image360Widget.js, line 2

Extends

  • PR.BaseWidget

Members

autoRotateAngle_Number

Angle to increment between the interval if the image is rotating.

Source:
  • widgets/Image360Widget.js, line 72
See:

autoRotateSpeedNumber

The interval for the timer if we want to rotate the image automatically.

Source:
  • widgets/Image360Widget.js, line 78

autoSpinsNumber

Count that holds the number of spins. A single spin is 360 degrees rotation of the image.

Source:
  • widgets/Image360Widget.js, line 90

autoSpinTimer_String

Holds the timer id, the Timer is created for spinning the image 360 degrees.

Source:
  • widgets/Image360Widget.js, line 84

bounds_Array

The bounds of the image specified by the width/height.

Source:
  • widgets/Image360Widget.js, line 97
See:
  • PR.Image360Widget#setBounds_

currentAngle_Number

Holds the interim angle during rotation.

Source:
  • widgets/Image360Widget.js, line 103

currentImagePos_Number

The position of the current image in the view.

Source:
  • widgets/Image360Widget.js, line 109

elHTMLUListElement

The UL DOM element for the image 360 widget.

Source:
  • widgets/Image360Widget.js, line 130

images

The list of images

Source:
  • widgets/Image360Widget.js, line 143

imagesCount

The number of images used in this image 360 animation.

Source:
  • widgets/Image360Widget.js, line 139

imagesHolder

Container that holds all the images, usually the ul element.

Source:
  • widgets/Image360Widget.js, line 135

loopCountNumber

Number of times the rotation occurs if the autoply is set true.

Source:
  • widgets/Image360Widget.js, line 115

startAngle_

Temporary varialbe that holds the current angle on touchstart/mousedown

Source:
  • widgets/Image360Widget.js, line 124

startTouchPos_

Temporary varialbe that holds the clientX value on touchstart/mousedown

Source:
  • widgets/Image360Widget.js, line 119

wrapperHTMLDivElement

The parent DOM element for this widget.

Source:
  • widgets/Image360Widget.js, line 149

Methods

addInteractionEvents_( )

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

Source:
  • widgets/Image360Widget.js, line 358

autoRotate( )

Trigger the timer, if to complete a full 360 degrees rotation

Source:
  • widgets/Image360Widget.js, line 384

autoRotateIE( )

IE fix to fire the autoRotate only once we're sure all the images have loaded

Source:
  • widgets/Image360Widget.js, line 391

getCurrentImagePosition( ) → {Number}

Returns the position of the current image. If we are on the last image set the first image to dispaly.

Returns:
Number
Source:
  • widgets/Image360Widget.js, line 423

initialize( element )

Initializes the widget, bind all the methods to 'this' and touch events

Parameters:
Name Type Description
element

The widget element on the HTML DOM.
Source:
  • widgets/Image360Widget.js, line 156

initVars_( )

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

Source:
  • widgets/Image360Widget.js, line 313

removeInteractionEvents_( )

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

Source:
  • widgets/Image360Widget.js, line 365
Top