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.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
    <title>360 Product View</title>
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <link rel="stylesheet" href="//">
        width: 610px;
        height: 370px;
        margin: 0 auto;
        class="y360 y360--svgRoundLight y360--controls-over"

        <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 class="y360-wave-preloader-content__text">
                    <span class="y360-preloader-percent__text">

        <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 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 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 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>
        <div class="y360__start-button" />


    <script src="//"></script>
    <script src="//"></script>
        // start loading images or show start button / start image
            .then(function (view) {
                // view is initialized
        .catch(function (error) {
            // some error
            console.log('error creating 360 view:', error)

y360 views manager API


* 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>

Is the id attribute of the div (or any html element) into which the player is rendered

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 


    // start loading images or show start button / start image
        .then(function (view) {
            // view is initialized
    .catch(function (error) {
        // some error
        console.log('error creating 360 view:', error)


 * Destroys a 360 product view instance - removes images, 
 * listeners and also the target  div from DOM

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




 * Returns player instance 
 * @param {string} id dom target element id
 public getPlayer(id:string | undefined):IYofla360Player | null 

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:

Starts the product rotation (if it was stopped)


Stops the product rotation (if it was running)


Destroys the player instance. Removes also the target DOM elment from DOM.


Stops or starts the rotation


Enters / leavs the fullsreen mode (if supported by browser)


Shows (skips to) an image by 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.


Shows the next/previous image


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


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


Triggered when images start to load

Triggered when all images are loaded

Triggered when one or more images finish loading

Back to top