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

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

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

 var el = document.querySelector('.rs-pq3d');
 var pq3d = new PhotoQueue(el);

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

 var pq3d = new PhotoQueue(el, {
   useMouseDrag:true,
   itemShadow:'0px 10px 15px 5px #222',
   shiftDistance:600,
   itemDistance:200,
   shiftMode:'spiral',
   roundCorner:10,
   viewAngleX:-12,
   viewAngleY:0,
   easing:'easeOutQuint',
   duration:1000
 });

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 pq3d to window context then call its API methods:

 window.pq3d = pq3d;

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

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

 // Target previous item
 pq3d.prev();

Add event listeners:

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

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

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