319 lines
8.3 KiB
HTML
319 lines
8.3 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="viewer">Viewer</h1>
|
|
<p>The viewer is a wrapper component designed to contain a carousel, which itself can contain magnify-able images,
|
|
videos, and spin360 viewers. Here are some viewer examples.</p>
|
|
<h2 id="viewer-with-portrait-style-media">Viewer with portrait-style media</h2>
|
|
<p>Uses tags and a variety of breakpoint configurations for magnification and thumbnail styles.</p>
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
|
<script>
|
|
$(function(){
|
|
var element = $( "#viewer-1" )[0];
|
|
|
|
// use the data to render the components into the empty element
|
|
var viewer = new Akamai.Viewer(element, {
|
|
carousel: {
|
|
thumbnail: {
|
|
placement: "bottom",
|
|
type: "dots",
|
|
policy: "bar"
|
|
},
|
|
|
|
aspectratio: 45.6
|
|
},
|
|
|
|
magnifier: {
|
|
placement: "inline",
|
|
image: {
|
|
policy: "foo"
|
|
}
|
|
},
|
|
|
|
breakpoints : {
|
|
"500" : {
|
|
carousel: {
|
|
thumbnail: {
|
|
type: "images"
|
|
},
|
|
|
|
aspectratio: false
|
|
},
|
|
magnifier: {
|
|
placement: "flyoutloupe",
|
|
magnification: 3,
|
|
flyout: {
|
|
width: 220,
|
|
height: 220
|
|
}
|
|
}
|
|
},
|
|
|
|
"1000" : {
|
|
carousel: {
|
|
thumbnail: {
|
|
placement: "left"
|
|
}
|
|
}
|
|
},
|
|
"1200" : {
|
|
magnifier: {
|
|
placement: "flyouttopright",
|
|
flyout: {
|
|
width: 320,
|
|
height: 320
|
|
},
|
|
magnification: 3
|
|
}
|
|
},
|
|
},
|
|
items: {
|
|
tags: ["red"],
|
|
uri: "json/clothing-4.json"
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<div id="viewer-1" class="demo-viewer-portrait"></div>
|
|
</div><!--/xrayhtml-->
|
|
|
|
<h2 id="viewer-with-square-images-and-dot-thumbnails-on-the-bottom">Viewer with square images and dot thumbnails on the bottom</h2>
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
|
<script>
|
|
$(function(){
|
|
var element = $( "#viewer-2" )[0];
|
|
|
|
// use the data to render the components into the empty element
|
|
var viewer = new Akamai.Viewer(element, {
|
|
carousel: {
|
|
thumbnail: {
|
|
type: "dots",
|
|
placement: "bottom"
|
|
}
|
|
},
|
|
items: {
|
|
uri: "json/backpack-1.json"
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div id="viewer-2" class="demo-viewer-portrait"></div>
|
|
</div>
|
|
|
|
<h2 id="viewer-with-portrait-style-images-and-right-thumbnails-with-a-loupe-magnifier-at-wider-breakpoints">Viewer with portrait style images and right thumbnails with a loupe magnifier at wider breakpoints</h2>
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
|
<style>
|
|
/* Move the fullscreen button position above 500px */
|
|
@media( min-width: 31.25em ) {
|
|
#viewer-3 .akamai-fullscreen-btn {
|
|
top: .5em;
|
|
bottom: auto;
|
|
left: .5em;
|
|
right: auto;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
$(function(){
|
|
var element = $( "#viewer-3" )[0];
|
|
|
|
// use the data to render the components into the empty element
|
|
var viewer = new Akamai.Viewer(element, {
|
|
carousel: {
|
|
thumbnail: {
|
|
type: "images",
|
|
placement: "bottom"
|
|
}
|
|
},
|
|
breakpoints: {
|
|
"500" : {
|
|
carousel: {
|
|
thumbnail: {
|
|
placement: "right"
|
|
}
|
|
},
|
|
magnifier: {
|
|
placement: "flyoutloupe",
|
|
magnification: 4,
|
|
flyout: {
|
|
width: 220,
|
|
height: 220
|
|
}
|
|
}
|
|
},
|
|
},
|
|
items: {
|
|
uri: "json/dress-1.json"
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div id="viewer-3" class="demo-viewer-portrait"></div>
|
|
</div><!--/xrayhtml-->
|
|
<h2 id="car-photos-spin360">Car Photos & Spin360</h2>
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
|
|
|
<div data-akamai-viewer id="example-car"></div>
|
|
|
|
<script>
|
|
$(function(){
|
|
var element = $( "#example-car" )[0];
|
|
|
|
// use the data to render the components into the empty element
|
|
var viewer = new Akamai.Viewer(element, {
|
|
items: {
|
|
uri: "json/car-3.json"
|
|
},
|
|
spin360: {
|
|
reverse: true,
|
|
controls: {
|
|
arrows: true,
|
|
play: true
|
|
},
|
|
|
|
sensitivity: 2
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
<h2 id="tag-switcher-demo">Tag switcher demo</h2>
|
|
<div data-xrayhtml="flip" data-xrayhtml-noinit class="prism">
|
|
<style>
|
|
#clothing-4-tag-switcher a {
|
|
display: inline-block;
|
|
padding: 20px 0;
|
|
width: 80px;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
font-family: sans-serif;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
#clothing-4-tag-switcher a:focus {
|
|
outline: 3px solid black;
|
|
}
|
|
#clothing-4-tag-switcher a[data-tag='green'] {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
|
|
#clothing-4-tag-switcher a[data-tag='navy'] {
|
|
background-color: navy;
|
|
color: white;
|
|
}
|
|
|
|
#clothing-4-tag-switcher a[data-tag='pink'] {
|
|
background-color: pink;
|
|
color: black;
|
|
}
|
|
|
|
#clothing-4-tag-switcher a[data-tag='red'] {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$(function(){
|
|
var element = $( "#clothing-4-tag-switch" )[0];
|
|
|
|
// use the data to render the components into the empty element
|
|
var viewer = new Akamai.Viewer(element, {
|
|
items: {
|
|
uri: "json/clothing-4.json"
|
|
}
|
|
});
|
|
|
|
$( "#clothing-4-tag-switcher" ).bind("click", function(event){
|
|
event.preventDefault();
|
|
|
|
var tag = $(event.target).attr("data-tag");
|
|
viewer.switchTag(tag);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div id="clothing-4-tag-switcher">
|
|
<a href="#" data-tag="green">green</a>
|
|
<a href="#" data-tag="navy">navy</a>
|
|
<a href="#" data-tag="pink">pink</a>
|
|
<a href="#" data-tag="red">red</a>
|
|
</div>
|
|
<div id="clothing-4-tag-switch">
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /docbody -->
|
|
|
|
<div class="docs-footer">
|
|
<p>Copyright 2017 Akamai Technologies, Inc. All Rights Reserved.</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|