SpinViewer 3 User Guide

Getting Started

Intro

It is a component that displays each image sequentially according to the direction of the user's touch movement (left / right) of the Sprite Image which is a collection of images taken by rotating around the object.

Sprite Image	Result

Example

SpinViewer Example

Coverage

Internet Explorer	Chrome	Firefox	Safari	iOS	Android
9+	Latest	Latest	Latest	7+	2.3+(except 3.x)

Dependency

egjs-component	egjs-axes
2.0.0+	2.1.0+

Basic Usage

Initialization

HTML

<!-- display area --> 
<div id="product-360"></div>

Script

var el = document.getElementById("product-360");

// If you use import, use import name (eg SpinViewer) instead of eg.view360.SpinViewer.
var viewer = new eg.view360.SpinViewer(el, {
  imageUrl: "/img/bag360.jpg",/* required */
  rowCount: 24 /* required */
});

Initialization Parameter

imageUrl required

• type: String

The url of the sprite image.

rowCount required

• type: Number
• default: 1

The number of rows, since the sprite image can be organized in grid form.

If the value is 1, the exception is omitable.

colCount required

• type: Number
• default: 1

The number of cols, since the sprite image can be organized in grid form.

If the value is 1, the exception is omitable.

width optional

• type: Number | String
• default: auto

The width of the image display area.

height optional

• type: Number | String
• default: auto

The height of the image display area.

If % is specified, it is based on the height of the containing block.

autoHeight optional

• type: Boolean
• default: true

Whether to automatically set the height of the image area to match the original image's proportion. true specifies the height automatically, false specifies the height specified in height.

colRow optional

• type: [Number, Number]
• default: [0, 0]

The col and row values of the area to show in the SpriteImage

scale optional

• type: Number
• default: 1

The scale value is the weight for the movement. The scale is calculated by multiplying the preset motion by the scale value. The higher the scale value, the faster the movement speed will be as the distance traveled increases.

Method

setScale

Set the scale.

parameter

• scale: Number - Motion scale(weight for the movement)

viewer.setScale(2);// It moves twice as much.

spinBy

It rotates for a certain duration (duration) by the specified angle (angle) based on the current rotation angle.

parameter

• angle: Number - angle (default: 0)
• param: Object
  • duration: Number - duration - ms (default: 400ms)

viewer.spinBy(720, {duration: 500});

Constraint: Can be used after a component has finished loading (after a "load" event).

spinTo

It rotates at a specified angle (duration) for a certain period of time.

parameter

• angle: Number - angle (default: 0)
• param: Object
  • duration: Number - duration - ms (default: 400ms)

viewer.spinTo(720, {duration: 500});

Constraint: Can be used after a component has finished loading (after a "load" event).

Event

load

Events that occur when component loading is complete

• parameter
  • target: The element of the area where the image is to be displayed
  • bgElement: Image element created with child of target

viewer.on("load", function(event) {
  console.log("load event fired - e.target", e.target, "e.bgElement", e.bgElement);
  this.spinBy(360, {duration: 300});
});

imageError

Events that occur when component loading fails

• parameter
  • imageUrl: User-specified image URL

viewer.on("imageError", function(e) {
  // Failure handling, eg. Apply a fallback image to the div
  console.log(e.imageUrl);
});

change

• parameter
  • colRow : [Number, Number] - Current col, row
  • frameIndex: Number - frameIndex is an index value that is sequentially appended in Z direction based on col and row.
  • angle: Number - The angle that is currently internally held at an angle between 0 and 359.    - NOTICE: Be careful not to assume that it matches the angle shown in the image of the actual product.

Events that occur when image indexes are changed by user interaction

viewer.on("change", function(event) {
  console.log(event.frameIndex, event.colRow, event.angle);   // event.colRow = [0, 4] event.frameIndex = 4, event.angle = 30
});