The simplest way to get started is to download the latest version of the LobsterPot HTML5 PivotViewer control.
The zip package contains all the files required to display CXML based collections.

The control relies upon the following script dependencies

<script type="text/javascript" src="../lib/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../lib/modernizr/modernizr.custom.65936.js"></script>
<script type="text/javascript" src="../lib/easing/easing.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../pivotviewer.min.js"></script>

In addition to that the main style sheet must also be referenced 

<link href="../style/pivotViewer.css" rel="stylesheet" type="text/css" />

The PivotViewer control can be inserted into a simple div element. For example the following div

<div id="pivotviewer" style="height:600px;"></div>

Is then referenced using the following jQuery syntax.

$(document).ready(function () {
        Loader: new PivotViewer.Models.Loaders.CXMLLoader("collections/PASS%20Summit%202011.cxml")

CXML based collections use the CXMLLoader object to create the underlying data structure required to render the collection. The CXMLLoader expects the path to the CXML file in it's constructor.

The CXMLLoader is based on the PivotViewer.Models.Loaders.ICollectionLoader object, see the section on Loaders.

Last edited Apr 20, 2012 at 4:31 AM by Roger_Noble, version 5


spackest Jul 19, 2012 at 7:02 AM 
Actually, it looks like the Content/images links should be something like ../media

Thanks :)

spackest Jul 19, 2012 at 6:47 AM 
I had better luck when I changed




and looking like the Content directory is missing.

Looking pretty cool, though :)