Embedding the Viewer

The Viewer is delivered as a configurable jQuery plugin. The viewer can be initialized with a number of configuration options. See Developer Reference > Configuration Options for more detail on initializing the viewer.

Required Files

The jQuery plugin is built using several open-source CSS, JavaScript, and HTML template files. These files implement the Viewer UI-chrome, which includes all of the Viewer tabs, buttons, dialogs, and inputs.

Example	Copy Code
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

CSS

In order to use the UI-chrome you must link to the following stylesheets:

Example	Copy Code
<link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/viewercontrol.css"> <link rel="stylesheet" href="css/viewer.css">

JavaScript

The following scripts are required:

Example	Copy Code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/underscore.min.js"></script> <script src="js/prefixfree.min.js"></script> <script src="js/viewercontrol.js"></script> <script src="js/viewer.js"></script>

Example

Copy Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/viewercontrol.js"></script>
<script src="js/viewer.js"></script>

HTML

You must add a div element with an id that will be use to initialize the Viewer plugin:

Example	Copy Code
<div id=”myDiv”></div>

Legacy Support

Include this condition for legacy (IE8) support:

Example	Copy Code
<!--[if lt IE 9]> <link rel="stylesheet" href="css/legacy.css"> <script src="js/selectivizr.js"></script> <script src="js/html5shiv.js"></script> <![endif]-->

jQuery Plugin

A jQuery plugin is used to embed the full-featured, responsive viewer on the page:

Example	Copy Code
$("#myDiv").pccViewer(pluginOptions);

The Viewer UI and behavior can be configured when the Viewer is embedded, using JavaScript parameters:

Example	Copy Code
var pluginOptions = { documentID: viewingSessionId, language: languageItems, template: htmlTemplates }

The documentID, language, and template parameters are required to initialize the Viewer plugin.

Common Pitfalls

There are a few issues that may arise while initializing the Viewer that may not be immediately obvious. Here are some common console errors and their possible causes:

Uncaught TypeError
- Cannot read property 'languageElements' of undefined - This error is thrown when viewer.js cannot find the language object. Verify that the language.json file is being read, and parsed correctly.

Uncaught TypeError
- Cannot read property 'viewer' of undefined - This error is thrown when viewer.js cannot find the template object. Make sure that the template object exists and that there is a viewer property.

Uncaught ReferenceError
- x is not defined - This error could be thrown if you have referenced a variable in the HTML templates that is not defined as data when loading the template. Check to see that this variable exists in either the language.json file or as a template data property used when loading a template.