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

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

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

1
2
 var el = document.querySelector('.rs-pr3d');
 var pr3d = new PhotoRow(el);

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
   var pr3d = new PhotoRow(el, {
     useMouseDrag:true,
     components:[0, 1, 2],
     itemDistance:400,
     shearAngle:45,
     roundCorner:10,
     viewAngleX:20,
     easing:'easeOutQuint',
     duration:1000,
     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 pr3d to window context then call its API methods:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 window.pr3d = pr3d;

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

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

 // Target previous item
 pr3d.prev();

Add event listeners:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 // Trigger every time an item is targeted
 pr3d.addEventListener('target', function(e) {
   console.log(e.detail);
 });

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

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