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);
});
|