SpinViewer

Object 360 photo viewer ↪️👠↩️
#product #turntable #sprite-image

Showcase

Features

Supported

  • Sprite image of (n x m) Grid style
  • Auto resize
  • Various input devices (Keyboard, Mouse, Touch)
  • Manual Spin

Browser support

Desktop

  • Lastest version of Chrome, Firefox, Safari, EDGE
  • IE 9+

Mobile

  • Safari (iOS 7+)
  • Chrome for android
  • Samsung Internet 4+

Getting Started

Installation

npm

In case using npm,

npm install @egjs/view360 --save

script tag

In case using script tag, Download the latest version of view360.js and include using the script tag


<!--script src="/path/to/js/release/latest/dist/SpinViewer/view360.spinviewer.pkgd.min.js"></script-->
<script src="//naver.github.io/egjs-view360/release/latest/dist/SpinViewer/view360.spinviewer.pkgd.min.js"></script>

Download link

Usage

1. Set up your Container Element

Your container element’s dimensions should be defined.

<div id="mySpinViewer"></div>

2. Import Module

ES5
// Or use global namespace
var SpinViewer = eg.view360.SpinViewer;
ES6+
// Use es6 import
import {SpinViewer} from "@egjs/view360";

3. Initialize SpinViewer

// create SpinViewer with option
var spinViewer = new SpinViewer(
  document.getElementById("mySpinViewer"), {
    imageUrl: "/path/to/image/image.jpg", /*required */
    rowCount: 24 /* If count of sprite row/col is lager than 1, this field is required */
  }
);

For more information about API, please visit the link.

Examples

Projects


Don't see your project? Post an issue with built-with-view360 label over on the github page.