240 lines
7.2 KiB
HTML
240 lines
7.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>Akamai Viewer Documentation</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<link rel="stylesheet" href="css/docs.css">
|
||
|
|
<script src="js/docs.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="docs">
|
||
|
|
|
||
|
|
<div class="docs-masthead">
|
||
|
|
<h1>Akamai Viewer Library</h1>
|
||
|
|
<div class="docs-logo"><a href="index.html"><img src="img/akamai-logo.png" alt="Akamai"></a></div>
|
||
|
|
<div class="docs-help"><!-- <a href="#">Need help?</a> --></div>
|
||
|
|
</div><!-- /masthead -->
|
||
|
|
|
||
|
|
<div class="docs-nav">
|
||
|
|
<h3 class="docs-nav-toggle">Menu</h3>
|
||
|
|
<div class="docs-nav-content">
|
||
|
|
<h4 class="docs-nav-title">Overview</h4>
|
||
|
|
<ul class="docs-nav-list">
|
||
|
|
<li><a href="index.html">Example Gallery</a></li>
|
||
|
|
<li><a href="intro.html">Getting Started Guide</a></li>
|
||
|
|
<li><a href="async.html">Async Viewer (Beta/preview)</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h4 class="docs-nav-title">Customization</h4>
|
||
|
|
<ul class="docs-nav-list">
|
||
|
|
<li><a href="carousel-arrows.html">Carousel Arrows</a></li>
|
||
|
|
<li><a href="carousel-thumbnails.html">Thumbnail Style</a></li>
|
||
|
|
<li><a href="magnifier-mode.html">Magnifier Mode</a></li>
|
||
|
|
<li><a href="spin360.html">Spin 360</a></li>
|
||
|
|
<li><a href="video.html">Video Player</a></li>
|
||
|
|
<li><a href="fullscreen.html">Fullscreen Mode</a></li>
|
||
|
|
<li><a href="policies.html">Image Sizes & Policies</a></li>
|
||
|
|
<li><a href="breakpoints.html">Responsive Breakpoints</a></li>
|
||
|
|
<li><a href="icons.html">Icon Set</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h4 class="docs-nav-title">API Docs</h4>
|
||
|
|
<ul class="docs-nav-list">
|
||
|
|
<li><a href="api/Akamai.Viewer.html">Viewer</a></li>
|
||
|
|
<li><a href="api/Akamai.AsyncViewer.html">Async Viewer (Beta/preview)</a></li>
|
||
|
|
<li><a href="api/Akamai.Carousel.html">Carousel</a></li>
|
||
|
|
<li><a href="api/Akamai.Magnifier.html">Magnifier</a></li>
|
||
|
|
<li><a href="api/Akamai.Spin360.html">Spin 360</a></li>
|
||
|
|
<li><a href="api/Akamai.Video.html">Video</a></li>
|
||
|
|
<li><a href="api/Akamai.Fullscreen.html">Fullscreen</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h4 class="docs-nav-title">Standalone Benchmark Pages</h4>
|
||
|
|
<ul class="docs-nav-list">
|
||
|
|
<li><a href="/comparison/mixed.html">Akamai Viewer</a></li>
|
||
|
|
<li><a href="/comparison/async.html">Akamai Viewer Async</a></li>
|
||
|
|
<li><a href="/comparison/scene7.html">Scene7 Viewer</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div><!-- /docs-nav -->
|
||
|
|
|
||
|
|
<div class="docbody docs-md">
|
||
|
|
|
||
|
|
<h1 id="spin360">Spin360</h1>
|
||
|
|
<p>The spin360 component consists of a series of images that iterate on drag or with arrow keys to produce a 360 degree view of a subject.</p>
|
||
|
|
<h2 id="basic-example">Basic example</h2>
|
||
|
|
<p>This is a fairly typical 360 viewer with default options. Autoplay is enabled and there are no controls. Drag with your finger or mouse to spin the ring.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
|
||
|
|
<div data-akamai-viewer id="ex-360-ring" class="demo-viewer-portrait"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-ring" )[0];
|
||
|
|
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
autoplay: { enabled: true }
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
uri: "json/ex-360-ring.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h2 id="reverse-image-order">Reverse image order</h2>
|
||
|
|
<p>If the images seem to spin in the opposite direction than the drag order, use the <code>reverse: true</code> option to flip the sequence. In this car example, the 360 needs this option set. Autoplay is disabled and there are no controls.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
|
||
|
|
<div data-akamai-viewer id="ex-360-bmw"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-bmw" )[0];
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
reverse: true
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
uri: "json/ex-360-bmw.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h2 id="longer-play-time-simple-controls">Longer play time, simple controls</h2>
|
||
|
|
<p>This example has an added animation at the end so it's less of a pure 360 rotation and more of an animation you can scrub through. A custom <code>interval</code> is used because this is a long animation.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
<div data-akamai-viewer id="ex-360-bike" class="demo-viewer-portrait"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-bike" )[0];
|
||
|
|
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
interval: 5000,
|
||
|
|
controls: {
|
||
|
|
play: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
uri: "json/ex-360-bike.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h2 id="controls-left-right-play-pause">Controls: Left, Right, Play/Pause</h2>
|
||
|
|
<p>This example turns on the manual controls to rotate left/right and play/pause but doesn't autoplay. It also adds a longer interval to give the animation longer to run.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
|
||
|
|
<div data-akamai-viewer id="ex-360-controls" class="demo-viewer-portrait"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-controls" )[0];
|
||
|
|
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
interval: 4400,
|
||
|
|
controls: {
|
||
|
|
arrows: true,
|
||
|
|
play: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
items: {
|
||
|
|
uri: "json/ex-360-chair.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h2 id="controls-with-custom-control-labels">Controls with custom control labels</h2>
|
||
|
|
<p>A typical 360 view for a shoe without autoplay with 5 second autoplay delay, controls with custom labels, and faster interval.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
<div data-akamai-viewer id="ex-360-shoe" class="demo-viewer-portrait"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-shoe" )[0];
|
||
|
|
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
autoplay: {
|
||
|
|
delay: 5000
|
||
|
|
},
|
||
|
|
interval: 1200,
|
||
|
|
controls: {
|
||
|
|
arrows: true,
|
||
|
|
play: true,
|
||
|
|
text: {
|
||
|
|
left: "Rotate shoe left",
|
||
|
|
right: "Rotate show right",
|
||
|
|
play: "Spin that shoe!"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
items: {
|
||
|
|
uri: "json/shoes-2.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<h2 id="image-configuration">Image Configuration</h2>
|
||
|
|
<p>The Spin360 images sources can be configured with a policy and widths.</p>
|
||
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
||
|
|
|
||
|
|
<div data-akamai-viewer id="ex-360-policy" class="demo-viewer-portrait"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function(){
|
||
|
|
var element = $( "#ex-360-policy" )[0];
|
||
|
|
|
||
|
|
// use the data to render the components into the empty element
|
||
|
|
var viewer = new Akamai.Viewer(element, {
|
||
|
|
spin360: {
|
||
|
|
images: {
|
||
|
|
policy: "img-polcy-xyz",
|
||
|
|
widths: ["300","600","900","1200","1500","1800"]
|
||
|
|
},
|
||
|
|
|
||
|
|
controls: {
|
||
|
|
arrows: true,
|
||
|
|
play: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
items: {
|
||
|
|
uri: "json/ex-360-chair.json"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- /docbody -->
|
||
|
|
|
||
|
|
<div class="docs-footer">
|
||
|
|
<p>Copyright 2017 Akamai Technologies, Inc. All Rights Reserved.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|