=====
Usage
=====
This guide contains Javascript usage, see :ref:`Markup Guide` and :ref:`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.
.. code-block:: html
:linenos:
To bootstrap the app in javascript, query *.rs-pc3d* element and pass it as an input argument to PhotoCloud constructor:
.. code-block:: javascript
:linenos:
var el = document.querySelector('.rs-pc3d');
var pc3d = new PhotoCloud(el);
A second object argument filled with :ref:`configuration options` can be passed to the constructor:
.. code-block:: javascript
:linenos:
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