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