Usage

This guide contains Javascript usage, see Markup Guide and Themes for Html and CSS usage.

In html file there are two nested div elements with class name .rs-container and .rs-sg3d which serve as the base container.

<div class="rs-container">
  <div class="rs-sg3d">
  ...
  </div>
</div>

To bootstrap the app in javascript, query .rs-sg3d element and pass it as an input argument to SphericalGallery constructor:

var el = document.querySelector('.rs-sg3d');
var sg3d = new SphericalGallery(el);

A second object argument filled with configuration options can be passed to the constructor:

var sg3d = new SphericalGallery(el, {
  containerZ:-2500,
  boxThickness:20,
  control:'mousemove',
  backImage:'assets/back.png',
  categoryMenu:{
    horizontal:true
  }
});

API Methods

• target(index)

  Target an item, bring it to center front and show its title and description. index: The item index

• next

  Target the next item in current category

• prev

  Target the previous item in current category

Dispatched Events

• cload

  Fire when a category is beginning to load

• cloadcomplete

  Fire when a category is finished loading

• target

  Fire when an item is being targeted

Examples

Assign sg3d to window context then call its API methods:

window.sg3d = sg3d;

// Target item with id: 1
sg3d.target(1);
// ...

// Target next item
sg3d.next();
// ...

// Target previous item
sg3d.prev();

Add event listeners:

// Trigger every time an item is targeted
sg3d.addEventListener('target', function(e) {
  console.log(e.detail);
});

// Trigger when a category begins to load
sg3d.addEventListener('cload', function(e) {
  console.log(e.detail);
});

// Trigger when a category finished loading
sg3d.addEventListener('cloadcomplete', function(e) {
  console.log(e.detail);
});