-
Notifications
You must be signed in to change notification settings - Fork 199
Usage
This is the simplest case and will render a blank viewer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="papaya.css" />
<script type="text/javascript" src="papaya.js"></script>
<title>Papaya Viewer</title>
</head>
<body>
<div class="papaya"></div>
</body>
</html>To load images automatically or specify other options to be applied when the page loads, you need to add a script block in the head portion of the HTML file. Create a parameter array, then reference this variable in the papaya div. Learn more about available parameters here.
<head>
...
<script type="text/javascript">
var params = [];
...
</script>
</head>
...
<div class="papaya" data-params="params"></div>Parameters can also be specified via the URL. For example: http://example.com/papaya/index.html?worldSpace=true However, this method may not be compatible with all features.
By default, a Papaya viewer will maximize itself to fit the webpage, but a viewer can also be nested within a div and placed alongside text or other graphics. Multiple viewers can be used on the same webpage in this way. When nested, the expandable parameter can be used to create a buttom to expand the nested viewer to full page size, then collapse it again.
<div style="width:600px; height:600px;">
<div class="papaya" data-params="params"></div>
</div>The following meta tags are recommended for a better experience on mobile devices.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" type="text/css" href="papaya.css" />
<script type="text/javascript" src="papaya.js"></script>
<title>Papaya</title>
</head>
<body>
<div class="papaya"></div>
</body>
</html>