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-pc3d which serve as the base container.

1
2
3
4
5
 <div class="rs-container">
   <div class="rs-pc3d">
   ...
   </div>
 </div>

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

1
2
 var el = document.querySelector('.rs-pc3d');
 var pc3d = new PhotoCloud(el);

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

1
2
3
4
5
6
7
8
 var pc3d = new PhotoCloud(el, {
   maxDistance:4000,
   rotationAngle:0,
   speed:2,
   boxThickness:22,
   orientation:'vertical',
   viewAngle:-0.8
 });

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