JavaScript API
The 360° player exposes JavaScript API which can be used to create/destroy/control the player.
1. Overview
The y360 global window object takes care of creating/destroying the 360° player instances. Each instance (each 360° player) requires a config.js file to be loaded. This config file specifies the player settings (like the speed of rotation), and from where the 360° images are loaded.
The 360° view is rendered into a div element, that also includes the UI elements (preloader, buttons).
It is recommended to include the y360.js script at the bottom of the page (before the closing body tag) so it does not block rendering of the page.
This is a sample HTML code that rendes a 360° product view into a page.
Please click here to expand html code example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>360 Product View</title>
<meta name="viewport" content="initial-scale=1, width=device-width">
<link rel="stylesheet" href="//c.y360.at/prod/gJyziYDb8/ZETjENGpU/va/styles.css">
<style>
div.y360{
width: 610px;
height: 370px;
margin: 0 auto;
}
</style>
</head>
<body>
<div
class="y360 y360--svgRoundLight y360--controls-over"
data-y360='{"path":"","id":"ZETjENGpU"}'
id="ZETjENGpU"
>
<div class="y360-preloader y360-wave-preloader y360-wave-preloader--small">
<div class="y360-wave-preloader-content">
<div class="y360-wave-preloader-content__wave">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div class="y360-wave-preloader-content__text">
<span class="y360-preloader-percent__text">
0%
</span>
</div>
</div>
</div>
<div class="y360__images" />
<div class="y360__controls">
<button class="y360__button y360__button--play" title="toggle play">
<span class="button__icon button__icon--play" aria-label="play"></span>
<span class="button__text" aria-hidden="true">Play</span>
</button>
<button class="y360__button y360__button--left" title="step left">
<span class="button__icon button__icon--left" aria-label="step left"></span>
<span class="button__text" aria-hidden="true">Left</span>
</button>
<button class="y360__button y360__button--right" title="step right">
<span class="button__icon button__icon--right" aria-label="step right"></span>
<span class="button__text" aria-hidden="true">Right</span>
</button>
<button class="y360__button y360__button--fullscreen" title="toggle fullscreen">
<span class="button__icon button__icon--fullscreen" aria-label="toggle fullscreen"></span>
<span class="button__text" aria-hidden="true">Fullscreen</span>
</button>
</div>
<div class="y360__start-button" />
</div>
<script src="//c.y360.at/prod/gJyziYDb8/ZETjENGpU/va/yofla360.js"></script>
<script src="//c.y360.at/prod/gJyziYDb8/ZETjENGpU/va/config.js"></script>
<script>
// start loading images or show start button / start image
y360.createPlayer("ZETjENGpU")
.then(function (view) {
// view is initialized
})
.catch(function (error) {
// some error
console.log('error creating 360 view:', error)
});
</script>
</body>
</html>
y360 views manager API
y360.createPlayer()
/**
* Creates a (or returns an existing) player instance
*
* @param {string} Target DOM element id
* @param {Object} Override / provide view config data
* @returns {Promise<IYofla360Player|string>}
*/
createPlayer(domTargetId:string, customData?:object):Promise<any>
domTargetId
Is the id attribute of the div (or any html element) into which the player is rendered
customData
The customData parameter can bear additional settings, replace all, or override any settings from the loaded config.js. Currently the Object.assign() function is used to merge the data with the loaded config.js data
The returned promise is resolved with reference to to the player view object instance, or rejected with an error string.
sample customData object options:
var myCustomData = {
// disables using hi-res images for retina screens on mobile devices
disableRetinaOnMobile : true
}
Example:
<script>
// start loading images or show start button / start image
y360.createPlayer("ZETjENGpU")
.then(function (view) {
// view is initialized
})
.catch(function (error) {
// some error
console.log('error creating 360 view:', error)
});
</script>
y360.destroyPlayer()
/**
* Destroys a 360 product view instance - removes images,
* listeners and also the target div from DOM
*/
destroyPlayer(id:string):void
id
The id is the id attribute of the target element of the 360 view (or id of the 360 view) that needs to be removed
Example:
y360.destroyPlayer("ZETjENGpU")
y360.getPlayer()
/**
* Returns player instance
*
* @param {string} id dom target element id
*/
public getPlayer(id:string | undefined):IYofla360Player | null
id
The id is the id attribute of the target element of the 360 view. If no id is specified, the first initialized 360 view is returned (there can be more than one 360 views in one page)
y360 player instance API
You retrieve the reference to 360° player instance by using the y360.getPlayer() method.
List of public methods of the player instance:
List of public variables of the player instance:
view.play()
Starts the product rotation (if it was stopped)
view.stop()
Stops the product rotation (if it was running)
view.destroy()
Destroys the player instance. Removes also the target DOM elment from DOM.
view.togglePlay()
Stops or starts the rotation
view.toggleFullscreen()
Enters / leavs the fullsreen mode (if supported by browser)
view.setImage()
Shows (skips to) an image by id
view.setImage(id:number):void
id
The id is the index number of the image in the list of loaded images. First image in list has the id/index 0.
view.advanceBy()
Shows the next/previous image
view.advanceBy(count:number):void
count
The count is number of frames/images to skip. Usually this value is 1 or -1 to show the next / previous image. You can advance faster (by more frames) by providing a higher number.
View varaibles
view.targetElement
Is the DOM element (usuall div) in wich the 360° product viewer instance is rendered. It emmits these usefull events, which you can use e.g. to create your own preloader.
You can view live example on custom events on CodePen
Events
LOADING_START
Triggered when images start to load
LOADING_COMPLETE
Triggered when all images are loaded
LOADING_PROGRESS
Triggered when one or more images finish loading