akamai
/
origin33
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

app

This commit is contained in:
Sangmin Kim 2024-03-19 21:48:13 +09:00
parent ee6f7f0757
commit bf2f7f91dd
132 changed files with 42516 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
app/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
app/html/.DS_Store vendored Normal file
View File

Binary file not shown.

105
app/html/akamai/sureroute-test-object.html Normal file
View File

@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</title>
<style type="text/css">
/*<![CDATA[ XML blockout */
<!--
p { margin-top: .75em;
text-align: justify;
margin-bottom: .75em;
}
h1,h2,h3 {
text-align: center; /* all headings centered */
clear: both;
}
div.centered {text-align:center;} /*work around for IE centering with CSS problem part 1 */
div.centered table {margin-left:auto; margin-right:auto; text-align:left;} /* work around for IE problem part 2 */
body{margin-left: 10%;
margin-right: 10%;
}
hr.large {width: 65%; margin-top: 2em; margin-bottom: 2em;}
hr.small {width: 45%; margin-top: 2em; margin-bottom: 2em;}
.pagenum { /* uncomment the next line for invisible page numbers */
/* visibility: hidden; */
position: absolute;
left: 92%;
font-size: smaller;
text-align: right;
} /* page numbers */
.sidenote {width: 20%; padding-bottom: .5em; padding-top: .5em;
padding-left: .5em; padding-right: .5em; margin-left: 1em;
float: right; clear: right; margin-top: 1em;
font-size: smaller; color: black; background: #eeeeee; border: solid 1px;}
.n {text-indent:0%;}
.bl {border-left: solid 2px;}
.ispace {margin-top: 2em;}
.center {text-align: center;}
.smcap {font-variant: small-caps;}
.caption {font-weight: bold;}
.figcenter {margin: auto; text-align: center;}
.footnote {margin-left: 10%; margin-right: 10%; font-size: 0.9em;}
.fnanchor {vertical-align: super; font-size: .8em; text-decoration: none;}
.gap {margin-top: 4em;}
.smallgap {margin-top: 2em;}
.poem {margin-left:10%; margin-right:10%; text-align: left;}
.poem br {display: none;}
.poem .stanza {margin: 1em 0em 1em 0em;}
.poem span.i4 {display: block; margin-left: 4em; padding-left: 3em; text-indent: -3em;}
// -->
/* XML end ]]>*/
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<h1>Ipsum, Lorem</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam massa enim, tincidunt non hendrerit eget, malesuada et nisi. In hac habitasse platea dictumst. Praesent nec laoreet ante. Aenean tempus nisi in erat tempus tempus. Vestibulum imperdiet lobortis sapien eu tempus. Vivamus volutpat quam sed eros molestie vitae dignissim nulla ultricies. Vivamus dictum elit velit. Pellentesque pellentesque ornare ornare. Mauris vel gravida sapien. Praesent eleifend tristique ipsum nec tempor. Vestibulum cursus eleifend tellus, a egestas lectus euismod sed.
</p>
<p>
Duis nec massa quam. Nulla porta, enim ut consequat tincidunt, quam tortor consequat enim, eu interdum eros lorem eu turpis. Cras vestibulum orci quis felis tristique quis semper sem imperdiet. Sed mattis tincidunt risus scelerisque scelerisque. Aliquam nisl quam, bibendum quis luctus eu, sodales ut felis. Integer id turpis nisi. Phasellus mattis nulla eu odio faucibus a auctor orci tristique. Nulla ullamcorper, risus nec semper accumsan, libero lacus aliquet elit, quis lacinia metus nunc vestibulum turpis. Suspendisse vel sapien vel magna auctor aliquam. Aenean fringilla fringilla metus non imperdiet. Aliquam nisl lacus, tempus vitae commodo non, accumsan ut lectus. Nam in urna eu neque pretium aliquam. Maecenas sit amet urna lectus. Donec vitae metus enim.
</p>
<p>
Sed lacus nulla, faucibus eget ullamcorper ut, mollis at metus. Vivamus tortor felis, tincidunt at tristique ut, tincidunt feugiat velit. Ut euismod felis non urna luctus luctus. Integer nec urna massa. Mauris vestibulum hendrerit auctor. Morbi at tellus nec arcu scelerisque rhoncus. Phasellus facilisis interdum lorem vulputate posuere. Nullam quis felis est. Aenean metus augue, tempus non ultricies et, dapibus vel felis. Pellentesque at augue velit. Nulla erat nisi, posuere eu pellentesque id, pretium ac libero. Phasellus tincidunt sollicitudin sapien at mollis. Nullam et libero velit, nec tincidunt eros. Aliquam et sem elit. Quisque suscipit orci enim, vel aliquam nisi. Suspendisse in enim a ligula blandit volutpat in id velit.
</p>
<p>
Nam tempor neque nec ligula sollicitudin rhoncus. Etiam et lorem vel odio pharetra interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In imperdiet nisi sed diam rutrum gravida in vel massa. Nam ullamcorper ultrices diam, vitae consequat lacus consequat consequat. Curabitur laoreet leo sed tortor fringilla nec euismod libero lobortis. Donec non enim lectus. Suspendisse potenti. In hac habitasse platea dictumst. Fusce semper auctor neque nec lobortis. Praesent vitae mauris turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed pharetra odio. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eget odio purus, quis dapibus massa.
</p>
<p>
Curabitur ut dapibus eros. Donec tempor, felis ac facilisis bibendum, nisi purus pellentesque sem, sollicitudin tempor lectus nulla at mi. Maecenas quis urna ut ante pulvinar pellentesque. Duis auctor imperdiet suscipit. Pellentesque dui nulla, volutpat quis posuere a, gravida ornare augue. Proin nec felis pharetra magna pellentesque facilisis. Curabitur lacus libero, malesuada sed tincidunt ac, aliquet ut tortor. Etiam gravida lorem nulla, consectetur eleifend risus. Donec facilisis, turpis laoreet imperdiet laoreet, purus justo egestas nulla, et hendrerit leo eros at orci. Nunc vulputate mauris sit amet sapien accumsan nec euismod orci volutpat. Sed ultricies velit ut lorem venenatis in convallis tellus imperdiet. Aenean auctor ultrices est ultricies rhoncus. Phasellus non magna a leo luctus fermentum nec fermentum erat.
</p>
<p>
Sed faucibus nisl quis diam mollis quis varius tortor tincidunt. Phasellus in turpis in tellus consectetur mollis. Donec a neque id metus condimentum dignissim. In hac habitasse platea dictumst. Pellentesque sem nisi, pulvinar nec sagittis vitae, lacinia non tellus. Aliquam dignissim dignissim volutpat. Pellentesque ut quam et mi tincidunt varius id vel quam. Duis consectetur elit ac ligula fringilla elementum. In elementum tellus viverra mi vehicula vitae tempus lectus laoreet. Nullam diam nibh, tincidunt vitae imperdiet a, luctus a felis. In posuere pulvinar volutpat. Pellentesque eget viverra justo.
</p>
<p>
Nullam nec sapien at felis molestie auctor. Sed dignissim erat eu nulla ullamcorper mattis. Curabitur felis sem, feugiat non semper ut, sollicitudin sed ipsum. Quisque cursus laoreet turpis, sit amet molestie neque consequat at. Vestibulum eu ligula quis nisl pulvinar rhoncus. Praesent faucibus, dolor in elementum ullamcorper, tellus ante mattis risus, ac imperdiet eros eros quis risus. Praesent luctus libero a diam pharetra eget placerat risus pulvinar. Donec sollicitudin pulvinar velit vel pellentesque. Quisque sagittis leo ac mauris congue adipiscing. In tempus facilisis facilisis. Aliquam erat volutpat. Suspendisse sagittis libero ipsum.
</p>
<p>
Aliquam at cursus ipsum. Vivamus purus mi, pretium at molestie id, dictum in quam. Proin egestas auctor iaculis. Maecenas sodales facilisis tellus eu bibendum. Vestibulum varius vehicula scelerisque. Praesent condimentum varius commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sem nisl, sagittis eu euismod non, tempor nec magna. Fusce sed auctor nisl. Phasellus porttitor sagittis est, sit amet eleifend elit dignissim et. Nam consectetur elementum elit non egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ultricies neque. Integer hendrerit nisi id dolor porta quis venenatis lacus dignissim. In vitae fringilla magna.
</p>
<p>
Fusce ultrices scelerisque felis, id semper quam posuere a. Sed nec erat eget velit euismod condimentum a in enim. Maecenas bibendum aliquam tincidunt. Mauris vestibulum neque at nulla sagittis id lacinia enim fermentum. Quisque adipiscing risus nec massa auctor condimentum. Mauris venenatis lacus justo, eu varius odio. Fusce commodo luctus felis, vitae lobortis lectus facilisis id. Nunc faucibus vestibulum urna et lacinia. Cras ornare quam neque, non gravida sapien. Cras porta, diam sit amet laoreet rutrum, massa erat commodo diam, eu rhoncus nisl massa ac metus. In sem mauris, venenatis nec euismod ac, suscipit condimentum neque. Quisque pretium blandit lectus, ut aliquet neque rhoncus eu. Vivamus ultrices porttitor tincidunt. Curabitur ut ipsum non ipsum ultrices tincidunt. Integer scelerisque augue nec nisl varius tristique. Morbi condimentum rutrum sodales. Pellentesque odio mauris, porttitor ac sollicitudin in, ultrices ut diam.
</p>
<p>
Sed congue adipiscing orci a pellentesque. Etiam quis neque eu nulla viverra egestas. Ut ultricies dui non enim rhoncus laoreet. Nulla molestie nibh non erat venenatis gravida. Pellentesque faucibus sem sit amet risus tincidunt non ultrices diam auctor. Praesent quis libero et tellus tempor molestie. Mauris ullamcorper feugiat libero sed elementum. Donec eget nunc eget diam hendrerit pulvinar. Ut ut imperdiet enim. Vestibulum sed quam lorem. Nunc ipsum massa, venenatis eget condimentum at, ornare id ante. Vestibulum ornare volutpat tincidunt. Etiam a eros erat. Curabitur lobortis, nisi a malesuada tincidunt, nisi enim congue eros, in dictum elit odio at nunc. Nam hendrerit porta velit a viverra.
</p>
<p>
Etiam vel velit urna. Donec commodo aliquet magna rhoncus pretium. Donec fermentum orci in diam dictum non pulvinar mi tristique. Morbi urna libero, sagittis vel facilisis nec, ornare vitae nunc. Pellentesque laoreet mi a mi condimentum sagittis. Donec eleifend, nisi sit amet tincidunt sollicitudin, leo magna accumsan elit, at adipiscing velit lacus id purus. Aenean nunc sapien, egestas vitae pretium viverra, bibendum vel tellus. Maecenas mattis dui ac justo facilisis sollicitudin. Proin in mi ac lacus hendrerit congue ac vitae elit. Aliquam erat volutpat. In hac habitasse platea dictumst. Phasellus dapibus diam vel velit consectetur tempor. Maecenas viverra suscipit bibendum. Sed non enim neque.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus at odio et odio volutpat egestas. Fusce non pellentesque felis. Nunc fermentum posuere sem quis egestas. Integer nec orci vel eros fringilla bibendum. Praesent placerat molestie elit at mattis. Nunc rutrum faucibus arcu non bibendum. Vestibulum at sapien sit amet sem iaculis congue. Morbi tempus, libero vitae interdum suscipit, lacus ipsum suscipit quam, non pretium nulla orci eget dui. Praesent et nisl turpis, ultricies convallis quam. In tempor urna et eros aliquet accumsan. Phasellus lobortis bibendum libero sit amet viverra. Aenean consectetur, neque eu cursus posuere, est leo molestie dui, sit amet vulputate mi erat eu tortor. Suspendisse arcu velit, porta sit amet adipiscing sed, ultrices id urna. In hendrerit iaculis massa in pretium. Vivamus eros augue, venenatis non hendrerit a, bibendum in tortor. Fusce et mauris lorem, vitae semper ligula. Nam iaculis, eros eu varius varius, orci sapien rhoncus arcu, et luctus urna lectus non quam. Donec gravida convallis justo at bibendum. Quisque non est velit, sed laoreet augue.
</p>
</div>
</body>
</html>

892
app/html/css/akamai-viewer.css Normal file
View File

@ -0,0 +1,892 @@
/*! Copyright 2019, Akamai Technologies, Inc. All Rights Reserved. akamai-viewer-0.7.2 */.enlarge_pane {
position: relative;
}
.enlarge_btn {
position: absolute;
top: 8px;
left: 8px;
font-size: 12px;
overflow: hidden;
background-color: rgba(255,255,255,.8);
color: #000;
text-decoration: none;
padding: .5em;
}
.enlarge_btn:hover,
.enlarge_btn:focus {
}
.enlarge_btn:active {
}
.enlarge_disabled .enlarge_btn {
display: none;
}
.zoom-out {
}
.enlarge-locked .enlarge_btn {
background-color: #333;
color: #fff;
border-color: #333;
background-image: url(/img/zoom-out-light.svg);
}
.enlarge-zoomed {
overflow: hidden;
}
.enlarge_contain {
overflow: hidden;
-webkit-overflow-scrolling: touch;
display: block;
position: relative;
height: 100%;
}
.enlarge_contain img {
width: 100%;
-webkit-touch-callout: none; /* image share menus get in the way of the interaction */
}
.enlarge-zoomed .enlarge_contain img,
.enlarge-zoomed.enlarge_flyout .enlarge_contain img {
max-width: none;
}
.enlarge-locked .enlarge_contain {
overflow: scroll;
}
.enlarge_loader {
top: 0;
left: 0;
width: 100%;
height: 5px;
position: absolute;
z-index: 30;
background: #eee;
opacity: 0;
display: none;
}
.enlarge-delay .enlarge_loader {
/* opacity: .4; disable loader for now */
}
.enlarge_loader * {
width: 0;
display: block;
height: 5px;
background: #4fa4c0;
-webkit-transition: width .6s linear;
transition: width .6s linear;
}
.enlarge_img-loading {
position: absolute;
left: -9999px;
opacity: 0;
}
.enlarge_flyout {
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: transform .3s;
position: absolute;
z-index: 9999;
}
.enlarge_flyout-flyoutloupe {
border-radius: 100%;
border: 5px solid #fff;
box-shadow: 0 0 5px #333;
pointer-events: none;
}
.enlarge_flyout-flyouttopleft,
.enlarge_flyout-flyouttopright {
top: 0;
}
.enlarge_flyout-flyoutbottomleft,
.enlarge_flyout-flyoutbottomright {
bottom: 0;
}
.enlarge_flyout-flyouttopright,
.enlarge_flyout-flyoutbottomright {
transform-origin: left;
}
.enlarge_flyout-flyouttopleft,
.enlarge_flyout-flyoutbottomleft {
transform-origin: right;
}
.enlarge-zoomed.enlarge_flyout {
transform: scale(1);
opacity: 1;
overflow: hidden;
}
.enlarge-zoomed.enlarge_flyout .enlarge_contain {
overflow: visible;
}
.enlarge-locked.enlarge_flyout {
overflow: auto;
}
.snapper:before,
.snapper_nextprev_contain:before, .snapper_items:before, .snapper_nav:before, .snapper:after,
.snapper_nextprev_contain:after, .snapper_items:after, .snapper_nav:after {
content: " ";
display: table; }
.snapper:after,
.snapper_nextprev_contain:after, .snapper_items:after, .snapper_nav:after {
clear: both; }
.snapper,
.snapper_nextprev_contain, .snapper_items, .snapper_nav {
*zoom: 1; }
.snapper * {
box-sizing: border-box; }
.snapper,
.snapper_nextprev_contain {
position: relative; }
.snapper:focus {
/* snapper div receives a tabindex to allow focus for keyboard arrow control */
outline: none; }
/* to hide the scrollbar handles while still allowing touch and gesture scrolling, wrap the snapper pane in a div with a snapper_pane_crop class
note: only use this if you have thumbnails or some other means of advancing slides for non-touchscreen devices */
.snapper-enhanced .snapper_pane_crop,
.enhanced .snapper_pane_crop {
overflow: hidden; }
.snapper-enhanced .snapper_pane_crop .snapper_pane,
.enhanced .snapper_pane_crop .snapper_pane {
/* IE and edge */
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none; }
.snapper-enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar,
.enhanced .snapper_pane_crop .snapper_pane::-webkit-scrollbar {
display: none; }
.snapper_pane {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
/* snap to points */
scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
/* x interval for snapping (100% of container width) */
scroll-snap-points-x: repeat(100%);
position: relative;
z-index: 0; }
.snapper_item {
width: 100%;
position: relative;
white-space: normal;
scroll-snap-align: start;
box-sizing: border-box;
padding-right: 1px;
padding-left: 1px; }
.enhanced .snapper_item,
.snapper-enhanced .snapper_item {
display: none; }
.enhanced .snapper_item:first-child,
.snapper-enhanced .snapper_item:first-child,
.snapper-enhanced .snapper_item[style] {
display: block; }
.snapper-enhanced .snapper_item:first-child,
.snapper-enhanced .snapper_item[style] {
float: left !important;
/* important to ensure default float nones don't leak through */
clear: none !important;
/* important to ensure default clears don't leak through */ }
/* next prev arrow selectors */
.snapper_item img {
width: 100%; }
.snapper_nav {
position: relative;
margin: 1em 0;
overflow: hidden; }
.snapper_nav_inner {
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding: 2px 1px 30px;
margin-bottom: -30px;
/* leave room for thumb outline to show up.. don't fully offset */
height: 84px; }
.snapper_nav a {
overflow: hidden;
border: 1px solid #ddd;
white-space: normal;
display: inline-block;
float: none;
vertical-align: middle;
height: 50px;
width: auto;
margin: 0 5px 0 0; }
.snapper_nav a.snapper_nav_item-selected {
/* selected styles here */
outline: 1px solid black; }
.snapper_nav img {
display: block;
height: 100%;
width: auto;
max-width: 100%; }
.tau {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
/* loading should be hidden to start */
.tau .loading {
display: none;
}
/* assist in preventing a drag */
.tau img {
/* hide all images, see below for exceptions */
display: none;
pointer-events: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* display the first image until enhancement when .focused should take over */
.tau > img:nth-child(1) {
display: block;
}
/* make sure that an enhanced component hides the first image unless overriden
by .focused */
.tau.tau-enhanced > img:nth-child(1) {
display: none;
}
/* display focused image */
.tau.tau-enhanced > img.focused {
display: block
}
.tau.tau-enhanced.tau-canvas > img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: block;
}
.tau .render img {
width: 1px;
height: 1px;
opacity: 0.00000001;
}
/* grabbing cursor for all elements on mousedown */
html.grabbing * {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.snapper_nav a.snapper_nav_item-selected {
outline: 1px solid #000;
border: 1px solid #000;
}
.snapper_nav a.snapper_nav_item-selected:focus {
outline: 1px dotted #bbb;
}
[data-akamai-carousel-thumbnail-type="none"] .snapper_nav {
display: none;
}
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav_inner,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav_inner {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 1px 30px 1px 1px;
white-space: normal;
margin-bottom: 0;
margin-right: -26px; /* leave room for thumb outline to show up.. don't fully offset */
height: 100%;
}
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
height: auto;
display: block;
margin: 0 10px 10px 0;
}
.snapper_nav .snapper_nav_inner img {
width: auto;
display: inline-block;
}
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav img,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav img {
height: auto;
display: block;
}
/* thumbnails left and right */
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nextprev_contain,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nextprev_contain {
width: 88%;
float: right;
}
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav.snapper_nav,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav.snapper_nav {
position: absolute;
width: 10%;
margin: 0;
height: 100%;
}
[data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
width: 100%;
}
/* thumbnails right */
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nextprev_contain {
float: left;
}
[data-akamai-carousel-thumbnail-placement="right"] .snapper_nav.snapper_nav {
right: 0;
}
/* next prev arrow selectors */
/* if there's only one item, arrows should be hidden */
[data-akamai-carousel-item-count="1"][data-akamai-carousel-arrows="true"] .snapper_nextprev {
display: none;
}
.snapper_nextprev,
.snapper_nextprev_item {
list-style: none;
margin: 0;
padding: 0;
}
.snapper_nextprev_next,
.snapper_nextprev_prev {
position: absolute;
top: 45%;
width: 34px;
height: 34px;
margin-top: -17px;
background-color: #fff;
border-radius: 100%;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
background-position: 52% 50%;
background-size: 16px auto;
transition: transform .1s linear;
}
.snapper_nextprev_next {
background-position: 54% 50%;
right: 8px;
background-image: url(../img/arrow-forward.svg);
background-position: 56% 50%;
background-repeat: no-repeat;
background-color: rgba(255,255,255,.3);
}
.snapper_nextprev_prev {
left: 8px;
background-image: url(../img/arrow-back.svg);
background-position: 44% 50%;
background-repeat: no-repeat;
background-color: rgba(255,255,255,.3);
}
.snapper_nextprev_next:hover,
.snapper_nextprev_prev:hover,
.snapper_nextprev_next:focus,
.snapper_nextprev_prev:focus {
transform: scale(1.1);
background-color: rgba(255,255,255,.5);
}
.snapper_nextprev_prev:active {
transform: scale(1);
}
@media (min-width: 40em) {
.snapper_nextprev_next,
.snapper_nextprev_prev {
width: 34px;
height: 34px;
margin-top: -17px;
background-size: 16px auto;
}
}
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav {
display: block;
text-align: center;
}
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a {
display: inline-block;
float: none;
width: 10px;
height: 10px;
margin: 0 6px;
background: #ddd;
border-radius: 100%;
border: 0;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
}
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a img {
position: absolute;
left: -999px;
}
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a {
float: none;
}
[data-akamai-carousel-thumbnail-type="dots"][data-akamai-carousel-thumbnail-placement="left"] .snapper_nav a,
[data-akamai-carousel-thumbnail-type="dots"][data-akamai-carousel-thumbnail-placement="right"] .snapper_nav a {
display: block;
margin: 0 auto 6px;
}
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected,
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected:focus,
[data-akamai-carousel-thumbnail-type="dots"] .snapper_nav a.snapper_nav_item-selected:active {
background: #000;
box-shadow: none;
border-color: transparent;
outline: none;
}
[data-akamai-carousel-thumb-type="video"],
[data-akamai-carousel-thumb-type="spin360"],
[data-akamai-carousel-thumb-type="image"] {
position: relative;
}
[data-akamai-carousel-thumb-type="spin360"]:after,
[data-akamai-carousel-thumb-type="video"]:after {
content: "\20";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.4) url(../img/video-light.svg) 50% 50% no-repeat;
background-size: 30px;
z-index: 2;
}
[data-akamai-carousel-thumbnail-type="dots"] [data-akamai-carousel-thumb-type="spin360"]:after,
[data-akamai-carousel-thumbnail-type="dots"] [data-akamai-carousel-thumb-type="video"]:after {
display: none;
}
[data-akamai-carousel-thumb-type="spin360"]:after {
background-image: url(../img/360-light.svg);
background-size: auto 45px;
}
[data-akamai-carousel-thumb-type="video"][data-akamai-carousel-thumb-noposter] img {
visibility: hidden;
}
[data-akamai-carousel] .snapper_pane.no-scroll {
overflow-x: hidden;
}
.akamai-fullscreen-active {
max-width: 100% !important;
}
.akamai-fullscreen-active [data-akamai-fullscreen-width] {
background-color: #fff;
height: 100%;
margin: 0 auto;
}
::backdrop {
background-color: #fff;
}
/* Opera */
:fullscreen-ancestor {
background-color: #fff;
}
/* Fullscreen plugin Buttons */
.akamai-fullscreen-btncontainer {
position: relative;
}
.akamai-fullscreen-btn {
position: absolute;
top: .5em;
right: .5em;
text-indent: -9999px;
width: 34px;
height: 34px;
background-size: 16px auto;
border: none;
border-radius: 50%;
cursor: pointer;
}
.akamai-fullscreen-btn-enter {
background-color: rgba(255,255,255,.3);
}
.akamai-fullscreen-btn-exit {
display: none;
}
.akamai-fullscreen-active .akamai-fullscreen-btn-enter {
display: none;
}
.akamai-fullscreen-active .akamai-fullscreen-btn-exit {
display: block;
background-color: rgba(0,0,0,.4);
}
/* Fullscreen plugin fallback behavior */
.akamai-fullscreen-fallback {
position: fixed !important;
left: 0;
top: 0;
background-color: #fff;
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 !important;
z-index: 100000;
}
.akamai-fullscreen-fallback [data-akamai-fullscreen-btn] {
display: none;
}
.akamai-fullscreen-fallback [data-akamai-fullscreen-exit-btn] {
display: block;
}
.icon-360 { background: url(../img/360.svg) 50% no-repeat; }
.icon-arrow-back { background: url(../img/arrow-back.svg) 50% no-repeat; }
.icon-arrow-forward { background: url(../img/arrow-forward.svg) 50% no-repeat; }
.icon-close { background: url(../img/close.svg) 50% no-repeat; }
.icon-muted { background: url(../img/muted.svg) 50% no-repeat; }
.icon-pause { background: url(../img/pause.svg) 50% no-repeat; }
.icon-play { background: url(../img/play.svg) 50% no-repeat; }
.icon-video { background: url(../img/video.svg) 50% no-repeat; }
.icon-volume { background: url(../img/volume.svg) 50% no-repeat; }
.icon-zoom-in { background: url(../img/zoom-in.svg) 50% no-repeat; }
.icon-zoom-out { background: url(../img/zoom-out.svg) 50% no-repeat; }
.icon-fullscreen { background: url(../img/fullscreen.svg) 50% no-repeat; }
.icon-360-light { background: url(../img/360-light.svg) 50% no-repeat; }
.icon-arrow-back-light { background: url(../img/arrow-back-light.svg) 50% no-repeat; }
.icon-arrow-forward-light { background: url(../img/arrow-forward-light.svg) 50% no-repeat; }
.icon-close-light { background: url(../img/close-light.svg) 50% no-repeat; }
.icon-muted-light { background: url(../img/muted-light.svg) 50% no-repeat; }
.icon-pause-light { background: url(../img/pause-light.svg) 50% no-repeat; }
.icon-play-light { background: url(../img/play-light.svg) 50% no-repeat; }
.icon-video-light { background: url(../img/video-light.svg) 50% no-repeat; }
.icon-volume-light { background: url(../img/volume-light.svg) 50% no-repeat; }
.icon-zoom-in-light { background: url(../img/zoom-in-light.svg) 50% no-repeat; }
.icon-zoom-out-light { background: url(../img/zoom-out-light.svg) 50% no-repeat; }
.icon-fullscreen-light { background: url(../img/fullscreen-light.svg) 50% no-repeat; }
.enlarge_btn {
width: 34px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255,255,255,.3);
border-radius: 100%;
padding: 0;
height: 34px;
background-position: 50%;
background-repeat: no-repeat;
background-image: url(../img/zoom-in.svg);
}
.enlarge_btn:hover,
.enlarge_btn:focus {
transform: scale(1.1);
background-color: rgba(255,255,255,.5);
}
.enlarge_btn:active {
transform: scale(1);
}
.zoom-out {
background-image: url(../img/zoom-out-light.svg);
}
.enlarge-locked .enlarge_btn {
background-color: #333;
color: #fff;
border-color: #333;
background-image: url(../img/zoom-out-light.svg);
}
[data-akamai-magnifier-button="false"] .enlarge_btn,
[data-akamai-magnifier-placement*="flyout"] .enlarge_btn {
display: none;
opacity: 0;
}
[data-akamai-carousel-item] .enlarge_btn {
visibility: hidden;
}
[data-akamai-carousel-item-active] .enlarge_btn {
visibility: visible;
}
[data-akamai-magnifier-button="false"] .enlarge_btn:focus,
[data-akamai-magnifier-placement*="flyout"] .enlarge_btn:focus {
opacity: 1;
}
.enlarge-locked .enlarge_btn {
opacity: 1;
}
[data-akamai-magnifier-hover-zoom-without-click="false"] {
cursor: zoom-in;
}
[data-akamai-magnifier-placement="inline"] .enlarge_flyout {
display: none;
}
[data-akamai-magnifier-disabled="true"] .enlarge_btn {
display: none;
}
[data-akamai-magnifier-mode="animatedzoom"] {
display: inline-block;
cursor: default;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
[data-akamai-magnifier-mode="animatedzoom"] > div {
background: white;
height: 100%;
-webkit-transform-origin: left top;
-webkit-transform: translateZ(0);
-moz-transform-origin: left top;
-moz-transform: translateZ(0);
-ms-transform-origin: left top;
-ms-transform: translateZ(0);
-o-transform-origin: left top;
-o-transform: translateZ(0);
transform-origin: left top;
transform: translateZ(0);
}
[data-akamai-magnifier-mode="animatedzoom"] > div > div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
[data-akamai-magnifier-mode="animatedzoom"] .scroller-zoom-in {
top: 8px;
background-image: url(../img/zoom-in.svg);
}
[data-akamai-magnifier-mode="animatedzoom"] .scroller-zoom-out {
top: 50px;
background-image: url(../img/zoom-out.svg);
}
[data-akamai-magnifier-mode="animatedzoom"] a {
position: absolute;
top: 8px;
left: 8px;
font-size: 12px;
color: #000;
text-decoration: none;
width: 34px;
height: 34px;
text-indent: -9999px;
overflow: hidden;
background-color: rgba(255,255,255,.3);
border-radius: 100%;
padding: 0;
background-position: 50%;
background-repeat: no-repeat;
}
[data-akamai-magnifier-mode="animatedzoom"] a:hover,
[data-akamai-magnifier-mode="animatedzoom"] a:focus {
transform: scale(1.1);
background-color: rgba(255,255,255,.5);
}
[data-akamai-magnifier-mode="animatedzoom"] a:active {
transform: scale(1);
}
[data-akamai-magnifier-button="false"] .scroller-zoom-in,
[data-akamai-magnifier-button="false"] .scroller-zoom-out {
display: none;
}
.scroller-zoom-in-max .scroller-zoom-in,
.scroller-zoom-in-max .scroller-zoom-in:hover,
.scroller-zoom-in-max .scroller-zoom-in:focus,
.scroller-zoom-in-max .scroller-zoom-in:active {
background-color: #333;
color: #fff;
border-color: #333;
}
.scroller-zoom-out-max .scroller-zoom-out,
.scroller-zoom-out-max .scroller-zoom-out:hover,
.scroller-zoom-out-max .scroller-zoom-out:focus,
.scroller-zoom-out-max .scroller-zoom-out:active {
background-color: #333;
color: #fff;
border-color: #333;
}
[data-akamai-spin360-cue="visible"]:before {
content: attr(title);
text-indent: -9999px;
overflow: hidden;
color: #fff;
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5) url(../img/360-light.svg) 50% 50% no-repeat;
background-size: 10% auto;
}
.tau-controls {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
[data-tau-controls] {
display: inline-block;
background-color: #fff;
background-image: none;
width: 40px;
height: 40px;
margin: 0 5px;
background-position: 50%;
border-radius: 0;
background-repeat: no-repeat;
background-size: auto;
opacity: .4;
overflow: hidden;
text-indent: -999px;
}
[data-tau-controls]:focus,
[data-tau-controls]:hover {
opacity: .8;
}
[data-tau-controls="left"] {
background-image: url(../img/arrow-back.svg);
}
[data-tau-controls="right"] {
background-image: url(../img/arrow-forward.svg);
}
.tau.spinning [data-tau-controls="play"] {
background-image: url(../img/pause.svg);
}
[data-tau-controls="play"],
.tau.spinning.control-left-down [data-tau-controls="play"],
.tau.spinning.control-right-down [data-tau-controls="play"] {
background-image: url(../img/play.svg);
}
[data-akamai-viewer] .tau > img {
/* hide all images, see below for exceptions */
display: none;
}
[data-akamai-video] {
position: relative;
}
[data-akamai-video] > video {
width: 100%;
vertical-align: middle;
}
[data-akamai-video] svg {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.8;
cursor: pointer;
background-color: rgba(0,0,0,0.2);
transition: opacity 150ms;
}
[data-akamai-video] svg:hover {
opacity: 1;
}
[data-akamai-video] svg.is-hidden {
display: none;
}
/* necessary for several child component positioning contexts */
[data-akamai-viewer] {
position: relative;
}
[data-akamai-viewer] * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[data-akamai-viewer] img,
[data-akamai-viewer] video,
[data-akamai-viewer] canvas {
max-width: 100%;
width: 100%;
display: block;
}
/* aspect ratio selector looks for number-based attr value */
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] {
position: relative;
height: 0;
/* padding-top: x% goes on the wrapper as an inline style */
}
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-magnifier],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-spin360],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-video] {
position: absolute;
top: 0;
width: 100%;
left: 0;
height: 100%;
}
/* if there's an aspect ratio, all img, canvas, and video height should be 100% of the container - which should have an aspect ratio top padding set by the JS */
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] img,
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] video,
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) [data-akamai-carousel-item] canvas {
max-height: 100%;
display: block;
margin: 0 auto;
width: auto;
height: auto;
max-width: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* once loaded, media will get an attribute for landscape or portrait, depending on the longer dimension. this is used to set one direction to 100% */
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) img[data-akamai-carousel-aspectratio-orientation="landscape"],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) video[data-akamai-carousel-aspectratio-orientation="landscape"],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) canvas[data-akamai-carousel-aspectratio-orientation="landscape"] {
width: 100%;
}
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) img[data-akamai-carousel-aspectratio-orientation="portrait"],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) video[data-akamai-carousel-aspectratio-orientation="portrait"],
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) canvas[data-akamai-carousel-aspectratio-orientation="portrait"] {
height: 100%;
}
/* when zoomed, we need to reset a lot of those values temporily */
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) .enlarge-zoomed img {
max-height: none;
max-width: none;
transform: none;
top: auto;
width: auto;
height: auto;
}
[data-akamai-carousel]:not([data-akamai-carousel-aspectratio="false"]) .tau.tau-enhanced.tau-canvas > img {
display: none !important;
}

1841
app/html/css/docs.css Normal file
View File

File diff suppressed because it is too large Load Diff

239
app/html/css/spin360.html Normal file
View File

@ -0,0 +1,239 @@
<!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&#39;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&#39;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>

318
app/html/example.html Normal file
View File

@ -0,0 +1,318 @@
<!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 &amp; 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>

1
app/html/img/360-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>360-light</title><path class="cls-1" d="M5.37,7.33a1.87,1.87,0,0,0,.44.32,1.1,1.1,0,0,0,.52.12.89.89,0,0,0,.52-.13A.44.44,0,0,0,7,7.25.64.64,0,0,0,7,7a.44.44,0,0,0-.18-.2,1.12,1.12,0,0,0-.36-.12,3.12,3.12,0,0,0-.58,0V5.91a2.43,2.43,0,0,0,.49,0,.92.92,0,0,0,.32-.12.47.47,0,0,0,.17-.19.54.54,0,0,0,.05-.24A.46.46,0,0,0,6.75,5a.57.57,0,0,0-.4-.13.87.87,0,0,0-.42.1,2.29,2.29,0,0,0-.4.28L5,4.61a2.56,2.56,0,0,1,.64-.41,1.8,1.8,0,0,1,.74-.15A2.25,2.25,0,0,1,7,4.14a1.36,1.36,0,0,1,.47.23,1.1,1.1,0,0,1,.31.37,1.12,1.12,0,0,1,.11.51.9.9,0,0,1-.19.58,1.36,1.36,0,0,1-.54.39v0a1.33,1.33,0,0,1,.62.37A1,1,0,0,1,8,7.31a1.1,1.1,0,0,1-.13.54,1.22,1.22,0,0,1-.35.4A1.63,1.63,0,0,1,7,8.5a2.23,2.23,0,0,1-.62.09,2.19,2.19,0,0,1-.91-.17A1.73,1.73,0,0,1,4.9,8Z"/><path class="cls-1" d="M11,5.18a1.07,1.07,0,0,0-.3-.22.83.83,0,0,0-.71,0,.69.69,0,0,0-.28.23,1.32,1.32,0,0,0-.2.42,2.68,2.68,0,0,0-.09.64A1,1,0,0,1,9.57,6a1.35,1.35,0,0,1,.23-.14L10,5.81l.22,0a1.57,1.57,0,0,1,.52.08,1.14,1.14,0,0,1,.41.25,1.1,1.1,0,0,1,.27.42,1.69,1.69,0,0,1,.1.6,1.52,1.52,0,0,1-.12.61,1.45,1.45,0,0,1-.31.46,1.3,1.3,0,0,1-.46.29,1.61,1.61,0,0,1-1.17,0A1.43,1.43,0,0,1,9,8.08a1.93,1.93,0,0,1-.37-.67,3.11,3.11,0,0,1-.14-1A3.38,3.38,0,0,1,8.6,5.36,2.19,2.19,0,0,1,9,4.63a1.56,1.56,0,0,1,.56-.43,1.63,1.63,0,0,1,.66-.14,1.69,1.69,0,0,1,.75.15,1.85,1.85,0,0,1,.52.37Zm-.88,2.64a.52.52,0,0,0,.39-.17.76.76,0,0,0,.16-.54.63.63,0,0,0-.16-.49.6.6,0,0,0-.41-.14.69.69,0,0,0-.34.1,1,1,0,0,0-.32.34,1.84,1.84,0,0,0,.1.43,1,1,0,0,0,.16.28.52.52,0,0,0,.2.15A.57.57,0,0,0,10.08,7.83Z"/><path class="cls-1" d="M13.54,8.58a1.38,1.38,0,0,1-.64-.15A1.35,1.35,0,0,1,12.41,8a2.23,2.23,0,0,1-.32-.71,3.83,3.83,0,0,1-.11-1,3.75,3.75,0,0,1,.11-1,2.19,2.19,0,0,1,.32-.7,1.3,1.3,0,0,1,.49-.43,1.52,1.52,0,0,1,1.28,0,1.3,1.3,0,0,1,.49.43,2.19,2.19,0,0,1,.32.7,3.75,3.75,0,0,1,.11,1,3.83,3.83,0,0,1-.11,1,2.23,2.23,0,0,1-.32.71,1.35,1.35,0,0,1-.49.44A1.38,1.38,0,0,1,13.54,8.58Zm0-.78a.46.46,0,0,0,.24-.07A.53.53,0,0,0,14,7.5,1.67,1.67,0,0,0,14.1,7a5,5,0,0,0,0-.73,4.89,4.89,0,0,0,0-.73A1.52,1.52,0,0,0,14,5.13a.51.51,0,0,0-.19-.22.48.48,0,0,0-.24-.06.47.47,0,0,0-.23.06.51.51,0,0,0-.19.22,1.58,1.58,0,0,0-.13.45,4.53,4.53,0,0,0,0,.73A4.59,4.59,0,0,0,13,7a1.74,1.74,0,0,0,.13.46.53.53,0,0,0,.19.24A.45.45,0,0,0,13.54,7.8Z"/><path class="cls-1" d="M9.13,11.43c-4.06-.06-7.24-.52-7.24-1.24,0-.33.36-.64,1-.91L3,8.65C1.47,9.06.5,9.64.5,10.22c0,1.43,3.72,2.69,8.63,2.83v1.71l3.14-2.51L9.13,9.88Z"/><path class="cls-1" d="M17,8.65l.13.64c.63.27,1,.58,1,.91,0,.66-2,1.1-5.53,1.21l.68.79-.68.8c4.39-.27,6.92-1.45,6.92-2.78C19.5,9.64,18.47,9.06,17,8.65Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
app/html/img/360.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>360</title><path d="M5.37,7.33a1.87,1.87,0,0,0,.44.32,1.1,1.1,0,0,0,.52.12.89.89,0,0,0,.52-.13A.44.44,0,0,0,7,7.25.64.64,0,0,0,7,7a.44.44,0,0,0-.18-.2,1.12,1.12,0,0,0-.36-.12,3.12,3.12,0,0,0-.58,0V5.91a2.43,2.43,0,0,0,.49,0,.92.92,0,0,0,.32-.12.47.47,0,0,0,.17-.19.54.54,0,0,0,.05-.24A.46.46,0,0,0,6.75,5a.57.57,0,0,0-.4-.13.87.87,0,0,0-.42.1,2.29,2.29,0,0,0-.4.28L5,4.61a2.56,2.56,0,0,1,.64-.41,1.8,1.8,0,0,1,.74-.15A2.25,2.25,0,0,1,7,4.14a1.36,1.36,0,0,1,.47.23,1.1,1.1,0,0,1,.31.37,1.12,1.12,0,0,1,.11.51.9.9,0,0,1-.19.58,1.36,1.36,0,0,1-.54.39v0a1.33,1.33,0,0,1,.62.37A1,1,0,0,1,8,7.31a1.1,1.1,0,0,1-.13.54,1.22,1.22,0,0,1-.35.4A1.63,1.63,0,0,1,7,8.5a2.23,2.23,0,0,1-.62.09,2.19,2.19,0,0,1-.91-.17A1.73,1.73,0,0,1,4.9,8Z"/><path d="M11,5.18a1.07,1.07,0,0,0-.3-.22.83.83,0,0,0-.71,0,.69.69,0,0,0-.28.23,1.32,1.32,0,0,0-.2.42,2.68,2.68,0,0,0-.09.64A1,1,0,0,1,9.57,6a1.35,1.35,0,0,1,.23-.14L10,5.81l.22,0a1.57,1.57,0,0,1,.52.08,1.14,1.14,0,0,1,.41.25,1.1,1.1,0,0,1,.27.42,1.69,1.69,0,0,1,.1.6,1.52,1.52,0,0,1-.12.61,1.45,1.45,0,0,1-.31.46,1.3,1.3,0,0,1-.46.29,1.61,1.61,0,0,1-1.17,0A1.43,1.43,0,0,1,9,8.08a1.93,1.93,0,0,1-.37-.67,3.11,3.11,0,0,1-.14-1A3.38,3.38,0,0,1,8.6,5.36,2.19,2.19,0,0,1,9,4.63a1.56,1.56,0,0,1,.56-.43,1.63,1.63,0,0,1,.66-.14,1.69,1.69,0,0,1,.75.15,1.85,1.85,0,0,1,.52.37Zm-.88,2.64a.52.52,0,0,0,.39-.17.76.76,0,0,0,.16-.54.63.63,0,0,0-.16-.49.6.6,0,0,0-.41-.14.69.69,0,0,0-.34.1,1,1,0,0,0-.32.34,1.84,1.84,0,0,0,.1.43,1,1,0,0,0,.16.28.52.52,0,0,0,.2.15A.57.57,0,0,0,10.08,7.83Z"/><path d="M13.54,8.58a1.38,1.38,0,0,1-.64-.15A1.35,1.35,0,0,1,12.41,8a2.23,2.23,0,0,1-.32-.71,3.83,3.83,0,0,1-.11-1,3.75,3.75,0,0,1,.11-1,2.19,2.19,0,0,1,.32-.7,1.3,1.3,0,0,1,.49-.43,1.52,1.52,0,0,1,1.28,0,1.3,1.3,0,0,1,.49.43,2.19,2.19,0,0,1,.32.7,3.75,3.75,0,0,1,.11,1,3.83,3.83,0,0,1-.11,1,2.23,2.23,0,0,1-.32.71,1.35,1.35,0,0,1-.49.44A1.38,1.38,0,0,1,13.54,8.58Zm0-.78a.46.46,0,0,0,.24-.07A.53.53,0,0,0,14,7.5,1.67,1.67,0,0,0,14.1,7a5,5,0,0,0,0-.73,4.89,4.89,0,0,0,0-.73A1.52,1.52,0,0,0,14,5.13a.51.51,0,0,0-.19-.22.48.48,0,0,0-.24-.06.47.47,0,0,0-.23.06.51.51,0,0,0-.19.22,1.58,1.58,0,0,0-.13.45,4.53,4.53,0,0,0,0,.73A4.59,4.59,0,0,0,13,7a1.74,1.74,0,0,0,.13.46.53.53,0,0,0,.19.24A.45.45,0,0,0,13.54,7.8Z"/><path d="M9.13,11.43c-4.06-.06-7.24-.52-7.24-1.24,0-.33.36-.64,1-.91L3,8.65C1.47,9.06.5,9.64.5,10.22c0,1.43,3.72,2.69,8.63,2.83v1.71l3.14-2.51L9.13,9.88Z"/><path d="M17,8.65l.13.64c.63.27,1,.58,1,.91,0,.66-2,1.1-5.53,1.21l.68.79-.68.8c4.39-.27,6.92-1.45,6.92-2.78C19.5,9.64,18.47,9.06,17,8.65Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
app/html/img/akamai-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
app/html/img/arrow-back-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.71 33.71"><defs><style>.cls-1{fill:#fff;}</style></defs><title>arrow-back-circle</title><path class="cls-1" d="M20,3.17A16.85,16.85,0,1,0,36.83,20,16.85,16.85,0,0,0,20,3.17Zm2.94,24.07a1.11,1.11,0,0,1,0,1.56,1.12,1.12,0,0,1-1.55,0L11.85,20l9.52-8.81.15-.13a1.1,1.1,0,0,1,1.32,1.76L15.08,20Z" transform="translate(-3.12 -3.17)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

1
app/html/img/arrow-back-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>arrow-back-light</title><path class="cls-1" d="M11.54,18.63a.87.87,0,0,0,1.2,0,.85.85,0,0,0,0-1.2L4.71,10l.12-.11,7.86-7.28a.85.85,0,1,0-1.15-1.24L2.22,10Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

1
app/html/img/arrow-back.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>arrow-back</title><path d="M11.54,18.63a.87.87,0,0,0,1.2,0,.85.85,0,0,0,0-1.2L4.71,10l.12-.11,7.86-7.28a.85.85,0,1,0-1.15-1.24L2.22,10Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

1
app/html/img/arrow-forward-circle.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.71 33.71"><defs><style>.cls-1{fill:#fff;}</style></defs><title>arrow-forward-circle</title><path class="cls-1" d="M20,36.88A16.85,16.85,0,1,0,3.12,20,16.85,16.85,0,0,0,20,36.88ZM17,12.81a1.11,1.11,0,0,1,0-1.56,1.12,1.12,0,0,1,1.55,0l9.52,8.81-9.52,8.81-.15.13a1.1,1.1,0,0,1-1.32-1.76l7.76-7.19Z" transform="translate(-3.12 -3.17)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

1
app/html/img/arrow-forward-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>arrow-forward-light</title><path class="cls-1" d="M7.06,18.63,16.38,10,7.06,1.37A.85.85,0,1,0,5.91,2.61l8,7.38-.12.11L5.91,17.39a.85.85,0,0,0,0,1.2A.87.87,0,0,0,7.06,18.63Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 350 B

1
app/html/img/arrow-forward.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>arrow-forward</title><path d="M7.06,18.63,16.38,10,7.06,1.37A.85.85,0,1,0,5.91,2.61l8,7.38-.12.11L5.91,17.39a.85.85,0,0,0,0,1.2A.87.87,0,0,0,7.06,18.63Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 284 B

1
app/html/img/close-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>close-light</title><path class="cls-1" d="M17.71,16.33,11.39,10l.07-.07,6.26-6.26a1,1,0,0,0,0-1.36.83.83,0,0,0-1.24-.05L10,8.78l-.07-.07L3.48,2.25A.85.85,0,0,0,2.88,2h0a.84.84,0,0,0-.61.3,1,1,0,0,0,0,1.36L8.61,10l-.07.07L2.29,16.33a1,1,0,0,0,0,1.36.83.83,0,0,0,1.24.05L10,11.22l.07.07,6.45,6.46a.83.83,0,0,0,1.24-.05A1,1,0,0,0,17.71,16.33Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 517 B

1
app/html/img/close.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>close</title><path d="M17.71,16.33,11.39,10l.07-.07,6.26-6.26a1,1,0,0,0,0-1.36.83.83,0,0,0-1.24-.05L10,8.78l-.07-.07L3.48,2.25A.85.85,0,0,0,2.88,2h0a.84.84,0,0,0-.61.3,1,1,0,0,0,0,1.36L8.61,10l-.07.07L2.29,16.33a1,1,0,0,0,0,1.36.83.83,0,0,0,1.24.05L10,11.22l.07.07,6.45,6.46a.83.83,0,0,0,1.24-.05A1,1,0,0,0,17.71,16.33Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

1
app/html/img/fullscreen-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>fullscreen-light</title><path class="cls-1" d="M7.5,11.8a.8.8,0,0,0-.6.2L3.8,15.1v-2a.7.7,0,0,0-.7-.7.7.7,0,0,0-.7.7v3.8a.7.7,0,0,0,.7.7H6.9a.7.7,0,0,0,0-1.5h-2l3.1-3.1a.7.7,0,0,0,0-1C7.8,11.9,7.7,11.8,7.5,11.8Z"/><path class="cls-1" d="M16.9,2.4H13.1a.7.7,0,0,0-.7.7.7.7,0,0,0,.7.7h2L11.9,7.1a.7.7,0,0,0,0,1c.2.2.3.2.6.2a.7.7,0,0,0,.6-.3l3.1-3.1v2a.7.7,0,1,0,1.5,0V3.1A.7.7,0,0,0,16.9,2.4Z"/><path class="cls-1" d="M4.9,3.9h2a.7.7,0,0,0,.7-.7.7.7,0,0,0-.7-.7H3.1a.7.7,0,0,0-.7.7V6.9a.7.7,0,0,0,.7.7.7.7,0,0,0,.7-.7v-2L6.9,7.9a.7.7,0,0,0,.6.3c.3,0,.4,0,.6-.2a.7.7,0,0,0,0-1Z"/><path class="cls-1" d="M16.9,12.4a.7.7,0,0,0-.7.7v2l-3.1-3.2a.8.8,0,0,0-.6-.2c-.2,0-.3.1-.4.3a.7.7,0,0,0,0,1l3.1,3.1h-2a.7.7,0,0,0,0,1.5h3.7a.7.7,0,0,0,.7-.7V13.1A.7.7,0,0,0,16.9,12.4Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 939 B

1
app/html/img/fullscreen.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>fullscreen</title><path d="M7.5,11.8a.8.8,0,0,0-.6.2L3.8,15.1v-2a.7.7,0,0,0-.7-.7.7.7,0,0,0-.7.7v3.8a.7.7,0,0,0,.7.7H6.9a.7.7,0,0,0,0-1.5h-2l3.1-3.1a.7.7,0,0,0,0-1C7.8,11.9,7.7,11.8,7.5,11.8Z"/><path d="M16.9,2.4H13.1a.7.7,0,0,0-.7.7.7.7,0,0,0,.7.7h2L11.9,7.1a.7.7,0,0,0,0,1c.2.2.3.2.6.2a.7.7,0,0,0,.6-.3l3.1-3.1v2a.7.7,0,1,0,1.5,0V3.1A.7.7,0,0,0,16.9,2.4Z"/><path d="M4.9,3.9h2a.7.7,0,0,0,.7-.7.7.7,0,0,0-.7-.7H3.1a.7.7,0,0,0-.7.7V6.9a.7.7,0,0,0,.7.7.7.7,0,0,0,.7-.7v-2L6.9,7.9a.7.7,0,0,0,.6.3c.3,0,.4,0,.6-.2a.7.7,0,0,0,0-1Z"/><path d="M16.9,12.4a.7.7,0,0,0-.7.7v2l-3.1-3.2a.8.8,0,0,0-.6-.2c-.2,0-.3.1-.4.3a.7.7,0,0,0,0,1l3.1,3.1h-2a.7.7,0,0,0,0,1.5h3.7a.7.7,0,0,0,.7-.7V13.1A.7.7,0,0,0,16.9,12.4Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

18
app/html/img/icon-zoom-in.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="18px" viewBox="0 0 17 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>zoom-in</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icons" sketch:type="MSArtboardGroup" transform="translate(-51.000000, -294.000000)">
<g id="zoom-in" sketch:type="MSLayerGroup" transform="translate(52.000000, 295.000000)">
<g sketch:type="MSShapeGroup">
<ellipse id="Oval-2" stroke="#9B9B9B" stroke-width="1.2" cx="5.81866659" cy="5.81866659" rx="5.81866659" ry="5.81866659"></ellipse>
<path d="M14.9333333,15.8092614 L9.6,10.6666667" id="Line-Copy" stroke="#9B9B9B" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.53333333,6.47653214 L8.53333333,5.53183857 L6.39282511,5.53183857 L6.39282511,3.2 L5.35246637,3.2 L5.35246637,5.53183857 L3.2,5.53183857 L3.2,6.47653214 L5.35246637,6.47653214 L5.35246637,8.90403587 L6.39282511,8.90403587 L6.39282511,6.47653214 L8.53333333,6.47653214 Z" id="+" fill="#717171"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
app/html/img/icon-zoom-out-white.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="17px" height="18px" viewBox="0 0 17 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>zoom-out-white</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icons" sketch:type="MSArtboardGroup" transform="translate(-52.000000, -331.000000)">
<g id="zoom-out-white" sketch:type="MSLayerGroup" transform="translate(53.000000, 332.000000)">
<ellipse id="Oval-2" stroke="#FFFFFF" stroke-width="1.2" sketch:type="MSShapeGroup" cx="5.81866659" cy="5.81866659" rx="5.81866659" ry="5.81866659"></ellipse>
<path d="M14.9333333,15.8092614 L9.6,10.6666667" id="Line-Copy" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" sketch:type="MSShapeGroup"></path>
<path d="M8.53333333,6.47653214 L8.53333333,5.53183857 L6.39282511,5.53183857 L5.35246637,5.53183857 L3.2,5.53183857 L3.2,6.47653214 L5.35246637,6.47653214 L6.39282511,6.47653214 L8.53333333,6.47653214 Z" id="+" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
app/html/img/menubars.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 B

1
app/html/img/muted-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>muted-light</title><path class="cls-1" d="M16.76,10.18l2.11-2.11a.55.55,0,0,0,0-.74.49.49,0,0,0-.36-.17.46.46,0,0,0-.36.14L16,9.48,13.82,7.3a.5.5,0,0,0-.36-.14h0a.48.48,0,0,0-.35.17.55.55,0,0,0,0,.74l2.11,2.11-2.11,2.11a.55.55,0,0,0,0,.74.5.5,0,0,0,.72,0L16,10.88l2.18,2.18a.48.48,0,0,0,.72,0,.55.55,0,0,0,0-.74Z"/><path class="cls-1" d="M4.83,7.35H1.68a.94.94,0,0,0-.94.94V12.5a.94.94,0,0,0,.94.94h.09a1.28,1.28,0,0,0,.29,0h3L11,18.59v-17Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 618 B

1
app/html/img/muted.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>muted</title><path d="M16.76,10.18l2.11-2.11a.55.55,0,0,0,0-.74.49.49,0,0,0-.36-.17.46.46,0,0,0-.36.14L16,9.48,13.82,7.3a.5.5,0,0,0-.36-.14h0a.48.48,0,0,0-.35.17.55.55,0,0,0,0,.74l2.11,2.11-2.11,2.11a.55.55,0,0,0,0,.74.5.5,0,0,0,.72,0L16,10.88l2.18,2.18a.48.48,0,0,0,.72,0,.55.55,0,0,0,0-.74Z"/><path d="M4.83,7.35H1.68a.94.94,0,0,0-.94.94V12.5a.94.94,0,0,0,.94.94h.09a1.28,1.28,0,0,0,.29,0h3L11,18.59v-17Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 538 B

1
app/html/img/pause-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>pause-light</title><rect class="cls-1" x="5.33" y="4" width="3.35" height="12" rx="0.63" ry="0.63"/><rect class="cls-1" x="11.32" y="4" width="3.35" height="12" rx="0.63" ry="0.63"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

1
app/html/img/pause.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>pause</title><rect x="5.33" y="4" width="3.35" height="12" rx="0.63" ry="0.63"/><rect x="11.32" y="4" width="3.35" height="12" rx="0.63" ry="0.63"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

1
app/html/img/play-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>play-light</title><path class="cls-1" d="M3.13,16.88a.34.34,0,0,0,.55.33l12.65-6.9c.3-.16.3-.43,0-.6L3.67,2.8a.34.34,0,0,0-.55.33Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

1
app/html/img/play.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>play</title><path d="M3.13,16.88a.34.34,0,0,0,.55.33l12.65-6.9c.3-.16.3-.43,0-.6L3.67,2.8a.34.34,0,0,0-.55.33Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 242 B

1
app/html/img/video-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>video-light</title><path class="cls-1" d="M10,1a9,9,0,1,0,9,9A9,9,0,0,0,10,1Zm0,16.67A7.68,7.68,0,1,1,17.67,10,7.71,7.71,0,0,1,10,17.67Z"/><path class="cls-1" d="M7.43,13.54a.18.18,0,0,0,.28.17l6.51-3.55c.16-.08.16-.22,0-.31L7.71,6.3a.18.18,0,0,0-.28.17Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
app/html/img/video-poster.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 666 KiB

1
app/html/img/video.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>video</title><path d="M10,1a9,9,0,1,0,9,9A9,9,0,0,0,10,1Zm0,16.67A7.68,7.68,0,1,1,17.67,10,7.71,7.71,0,0,1,10,17.67Z"/><path d="M7.43,13.54a.18.18,0,0,0,.28.17l6.51-3.55c.16-.08.16-.22,0-.31L7.71,6.3a.18.18,0,0,0-.28.17Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

1
app/html/img/volume-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>volume-light</title><path class="cls-1" d="M15.28,15.71a.47.47,0,0,1-.3-.84,6.56,6.56,0,0,0,2.41-4.79A6.54,6.54,0,0,0,15,5.3a.47.47,0,1,1,.6-.73,7.52,7.52,0,0,1,2.75,5.52,7.53,7.53,0,0,1-2.75,5.52A.47.47,0,0,1,15.28,15.71Z"/><path class="cls-1" d="M13.56,13.57a.47.47,0,0,1-.28-.85,3.31,3.31,0,0,0,1.52-2.62,3.31,3.31,0,0,0-1.52-2.62.47.47,0,0,1,.56-.76,4.21,4.21,0,0,1,1.91,3.39,4.21,4.21,0,0,1-1.91,3.39A.47.47,0,0,1,13.56,13.57Z"/><path class="cls-1" d="M4.77,7.25H1.62a.94.94,0,0,0-.94.94v4.21a.94.94,0,0,0,.94.94h.09a1.28,1.28,0,0,0,.29,0H5l5.88,5.11V1.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 738 B

1
app/html/img/volume.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>volume</title><path d="M15.28,15.71a.47.47,0,0,1-.3-.84,6.56,6.56,0,0,0,2.41-4.79A6.54,6.54,0,0,0,15,5.3a.47.47,0,1,1,.6-.73,7.52,7.52,0,0,1,2.75,5.52,7.53,7.53,0,0,1-2.75,5.52A.47.47,0,0,1,15.28,15.71Z"/><path d="M13.56,13.57a.47.47,0,0,1-.28-.85,3.31,3.31,0,0,0,1.52-2.62,3.31,3.31,0,0,0-1.52-2.62.47.47,0,0,1,.56-.76,4.21,4.21,0,0,1,1.91,3.39,4.21,4.21,0,0,1-1.91,3.39A.47.47,0,0,1,13.56,13.57Z"/><path d="M4.77,7.25H1.62a.94.94,0,0,0-.94.94v4.21a.94.94,0,0,0,.94.94h.09a1.28,1.28,0,0,0,.29,0H5l5.88,5.11V1.5Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 644 B

1
app/html/img/zoom-in-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>zoom-in-light</title><path class="cls-1" d="M8,.85a7.12,7.12,0,1,0,4.48,12.64l.07-.06.06.06L18,19A.67.67,0,0,0,19,19,.65.65,0,0,0,19,18l-5.53-5.53.06-.07A7.11,7.11,0,0,0,8,.85ZM8,13.78A5.81,5.81,0,1,1,13.78,8,5.82,5.82,0,0,1,8,13.78Z"/><path class="cls-1" d="M8,11.53a.65.65,0,0,0,.65-.65V8.62h2.26a.65.65,0,0,0,0-1.3H8.62V5.06a.65.65,0,1,0-1.3,0V7.32H5.06a.65.65,0,0,0,0,1.3H7.32v2.26A.65.65,0,0,0,8,11.53Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

1
app/html/img/zoom-in.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>zoom-in</title><path d="M8,.85a7.12,7.12,0,1,0,4.48,12.64l.07-.06.06.06L18,19A.67.67,0,0,0,19,19,.65.65,0,0,0,19,18l-5.53-5.53.06-.07A7.11,7.11,0,0,0,8,.85ZM8,13.78A5.81,5.81,0,1,1,13.78,8,5.82,5.82,0,0,1,8,13.78Z"/><path d="M8,11.53a.65.65,0,0,0,.65-.65V8.62h2.26a.65.65,0,0,0,0-1.3H8.62V5.06a.65.65,0,1,0-1.3,0V7.32H5.06a.65.65,0,0,0,0,1.3H7.32v2.26A.65.65,0,0,0,8,11.53Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 505 B

1
app/html/img/zoom-out-light.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#fff;}</style></defs><title>zoom-out-light</title><path class="cls-1" d="M7.81.85a7.12,7.12,0,1,0,4.48,12.64l.07-.06.06.06L17.89,19a.67.67,0,0,0,.92,0,.65.65,0,0,0,0-.92l-5.53-5.53.06-.07A7.11,7.11,0,0,0,7.81.85Zm0,12.93A5.82,5.82,0,1,1,13.63,8,5.82,5.82,0,0,1,7.81,13.78Z"/><path class="cls-1" d="M10.72,7.32H4.9a.65.65,0,0,0,0,1.3h5.82a.65.65,0,0,0,0-1.3Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
app/html/img/zoom-out.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>zoom-out</title><path d="M7.81.85a7.12,7.12,0,1,0,4.48,12.64l.07-.06.06.06L17.89,19a.67.67,0,0,0,.92,0,.65.65,0,0,0,0-.92l-5.53-5.53.06-.07A7.11,7.11,0,0,0,7.81.85Zm0,12.93A5.82,5.82,0,1,1,13.63,8,5.82,5.82,0,0,1,7.81,13.78Z"/><path d="M10.72,7.32H4.9a.65.65,0,0,0,0,1.3h5.82a.65.65,0,0,0,0-1.3Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 427 B

134
app/html/index.html Normal file
View File

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
<title>Thirty-Three</title>
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
</head>
<body style="background-image: url(retail_files/background/background.jpg);background-size:auto 100%;background-repeat:no-repeat;">
<div style="padding:10px;overflow:auto;">
<div id="main-logo">
<div id="TextLogo">Thirty-Three</div>
</div>
<div id="MyNav">
<ul>
<li><a title="HOME" href="/">HOME</a></li>
<li><a title="MEN" href="/jacket.html">MEN</a></li>
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
</ul>
</div>
</div>
<style>
.videoplayer { width: 100%; }
.clear { display: block; margin:5px 0px; clear: both; }
</style>
<div id="imageContainer">
<!--VIDEO: MENS JACKETS - leather.mp4 -->
<a href="/jacket.html" title="Compare pristine and IM optimized video">
<video id="myVideo" class="videoplayer" playsinline="" autoplay="" muted="" loop="">
<source id="myVideoSrc" src="/video/leather.mp4?imwidth=5000" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
<h3>Men's Jackets - Video</h3>
<h2><em style="color:#999">Demo Video Optimization</em></h2>
<div class="clear"></div>
<script>
if (window.innerWidth < 850) {
var vid = document.getElementById("myVideoSrc");
vid.src = "/video/leather-mobile-cropped.mp4";
}
</script>
<!-- ##### end exercise 2 task in here ##### -->
<!--IMAGE 1: MENS JACKETS - jacket.jpg -->
<div id="catContainer">
<img src="./retail_files/jacket.jpg" width="95%" title="Piez Demo: Auto policy" onload="performance.clearMarks(&#39;img1 display&#39;); performance.mark(&#39;img1 display&#39;);"> <script>
performance.clearMarks("img1 display");
performance.mark("img1 display");
</script>
<h3>Men's Jackets</h3>
<h2><em style="color:#999">Auto policy</em></h2>
</div>
<!--IMAGE 2: WOMENS TOPS - sparkler.jpg -->
<div id="catContainer">
<a href="/womenstops.html" title="Demo image viewer"><img src="./retail_files/sparkler.jpg" width="95%"></a> <h3>Women's Tops</h3>
<h2><em style="color:#999">Demo Media viewer</em></h2>
</div>
<!--IMAGE 3: ACCESSORIES - accessories.jpg -->
<div id="catContainer">
<a href="/jewelry.html" title="Demo 360 viewer"><img src="./retail_files/accessories.jpg" width="95%"></a> <h3>Accessories and Jewelry</h3>
<h2><em style="color:#999">Demo 360 Media viewer</em></h2>
</div>
<!--IMAGE 4: MENS ESSENTIALS - mens_accessories.jpg -->
<div id="catContainer">
<img src="./retail_files/mens_accessories.jpg" srcset="retail_files/mens_accessories.jpg?imwidth=300 300w, retail_files/mens_accessories.jpg?imwidth=350 350w, retail_files/mens_accessories.jpg?imwidth=600 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth"> <h3>Men's Essentials</h3>
<h2><em style="color:#999">srcset with imwidth</em></h2>
</div>
<!--IMAGE 5: DENIM - mes_jeans.jpg -->
<div id="catContainer">
<img src="./retail_files/mens_jeans.jpg" srcset="retail_files/mens_jeans.jpg?imwidth=300&amp;impolicy=rwdImages 300w,
retail_files/mens_jeans.jpg?imwidth=350&amp;impolicy=rwdImages 350w,
retail_files/mens_jeans.jpg?imwidth=600&amp;impolicy=rwdImages 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth and custom policy"> <h3>Denim</h3>
<h2><em style="color:#999">srcset with imwidth + policy</em></h2>
</div>
<!--IMAGE 6: LEATHER COLLECTION - leather_jacket.jpg -->
<div id="catContainer">
<a href="/retail_files/leather_jacket.jpg?impolicy=cropped&amp;w=1200&amp;h=800&amp;x=0&amp;y=0" target="_leather" title="Image cropping demo"><picture>
<source media="(max-width : 480px)" srcset="retail_files/leather_jacket.jpg?imwidth=300&amp;impolicy=cropped 1x,
retail_files/leather_jacket.jpg?imwidth=600&amp;impolicy=cropped 2x,
retail_files/leather_jacket.jpg?imwidth=900&amp;impolicy=cropped 3x">
<source media="(max-width : 1024px)" srcset="retail_files/leather_jacket.jpg?imwidth=350&amp;impolicy=cropped 1x,
retail_files/leather_jacket.jpg?imwidth=700&amp;impolicy=cropped 2x">
<source media="(min-width : 1025px)" srcset="retail_files/leather_jacket.jpg?imwidth=600&amp;impolicy=rwdImages 1x,
retail_files/leather_jacket.jpg?imwidth=1200&amp;impolicy=rwdImages 2x">
<img src="./retail_files/leather_jacket.jpg" width="95%" onload="performance.clearMarks(&#39;img6 display&#39;); performance.mark(&#39;img6 display&#39;);">
</picture></a>
<h3>Leather Collection</h3>
<h2><em style="color:#999">Art direction with dynamic policies</em></h2>
</div>
</div>
<div id="vert-space"></div>
<div id="BottomList">
<div id="BottomContainer">
<div id="BottomDetail">
<b>Contact Us</b>
<ul>
<li><a title="Phone" href="/#Phone">Phone</a></li>
<li><a title="Email" href="/#Email">Email</a></li>
<li><a title="Mail" href="/#Mail">Mail</a></li>
<li><a title="Social Media" href="/#Social">Social Media</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>Departments</b>
<ul>
<li><a title="Men&#39;s" href="/#Mens">Men's</a></li>
<li><a title="Women&#39;s" href="/#Womens">Women's</a></li>
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>About Us</b>
<ul>
<li><a title="Press" href="/#Press">Press</a></li>
<li><a title="Careers" href="/#Careers">Careers</a></li>
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
</ul>
</div>
</div>
</div>
</body></html>

187
app/html/index.php Normal file
View File

@ -0,0 +1,187 @@
<?php
$LOGIN=false;
if($_COOKIE["LOGIN"]=="true"){
$LOGIN=true;
}
?>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
<?php
if($LOGIN){
?>
<title>Hi, Akamai!</title>
<?php
}else{
?>
<title>Thirty-Three</title>
<?php
}
?>
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
</head>
<body style="background-image: url(retail_files/background/background.jpg);background-size:auto 100%;background-repeat:no-repeat;">
</div>
<div style="padding:10px;overflow:auto;">
<div id="main-logo">
<?php
if($LOGIN){
?>
<div id="TextLogo">Hi, Akamai!</div>
<?php
}else{
?>
<div id="TextLogo">Thirty-Three</div>
<?php
}
?>
</div>
<div id="MyNav">
<ul>
<li><a title="HOME" href="/">HOME</a></li>
<li><a title="MEN" href="/jacket.html">MEN</a></li>
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
<?php
if($LOGIN){
?>
<li><a titie="LOG-OUT" href="/logout.php">LOG-OUT</a></li>
<?php
}else{
?>
<li><a title="LOG-IN" href="/login.php">LOG-IN</a><li>
<?php
}
?>
</ul>
</div>
</div>
<style>
.videoplayer { width: 100%; }
.clear { display: block; margin:5px 0px; clear: both; }
</style>
<div id="imageContainer">
<?php
$is_mobile = "false";
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')!==FALSE){
$is_mobile = "true";
}else{
$from_mobile = $_SERVER['is_mobile'];
if($from_mobile =="true"){
$is_mobile = "true";
}
}
if($is_mobile == "false"){
?>
<!--VIDEO: MENS JACKETS - leather.mp4 -->
<a href="/jacket.html" title="Compare pristine and IM optimized video">
<video id="myVideo" class="videoplayer" playsinline="" autoplay="" muted="" loop="">
<source id="myVideoSrc" src="/video/leather.mp4?imwidth=5000" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
<h3>Men's Jackets - Video</h3>
<h2><em style="color:#999">Demo Video Optimization</em></h2>
<?php
}
?>
<div class="clear"></div>
<script>
if (window.innerWidth < 850) {
var vid = document.getElementById("myVideoSrc");
vid.src = "/video/leather-mobile-cropped.mp4";
}
</script>
<!-- ##### end exercise 2 task in here ##### -->
<!--IMAGE 1: MENS JACKETS - jacket.jpg -->
<div id="catContainer">
<img src="./retail_files/jacket.jpg" width="95%" title="Piez Demo: Auto policy" onload="performance.clearMarks(&#39;img1 display&#39;); performance.mark(&#39;img1 display&#39;);"> <script>
performance.clearMarks("img1 display");
performance.mark("img1 display");
</script>
<h3>Men's Jackets</h3>
<h2><em style="color:#999">Auto policy</em></h2>
</div>
<!--IMAGE 2: WOMENS TOPS - sparkler.jpg -->
<div id="catContainer">
<a href="/womenstops.html" title="Demo image viewer"><img src="./retail_files/sparkler.jpg" width="95%"></a> <h3>Women's Tops</h3>
<h2><em style="color:#999">Demo Media viewer</em></h2>
</div>
<!--IMAGE 3: ACCESSORIES - accessories.jpg -->
<div id="catContainer">
<a href="/jewelry.html" title="Demo 360 viewer"><img src="./retail_files/accessories.jpg" width="95%"></a> <h3>Accessories and Jewelry</h3>
<h2><em style="color:#999">Demo 360 Media viewer</em></h2>
</div>
<!--IMAGE 4: MENS ESSENTIALS - mens_accessories.jpg -->
<div id="catContainer">
<img src="./retail_files/mens_accessories.jpg" srcset="retail_files/mens_accessories.jpg?imwidth=300 300w, retail_files/mens_accessories.jpg?imwidth=350 350w, retail_files/mens_accessories.jpg?imwidth=600 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth"> <h3>Men's Essentials</h3>
<h2><em style="color:#999">srcset with imwidth</em></h2>
</div>
<!--IMAGE 5: DENIM - mes_jeans.jpg -->
<div id="catContainer">
<img src="./retail_files/mens_jeans.jpg" srcset="retail_files/mens_jeans.jpg?imwidth=300&amp;impolicy=rwdImages 300w,
retail_files/mens_jeans.jpg?imwidth=350&amp;impolicy=rwdImages 350w,
retail_files/mens_jeans.jpg?imwidth=600&amp;impolicy=rwdImages 600w" sizes="(max-width: 480px) 300px, (max-width: 1024px) 350px, (min-width: 1025px) 600px" width="95%" title="Srcset demo using imwidth and custom policy"> <h3>Denim</h3>
<h2><em style="color:#999">srcset with imwidth + policy</em></h2>
</div>
<!--IMAGE 6: LEATHER COLLECTION - leather_jacket.jpg -->
<div id="catContainer">
<a href="/retail_files/leather_jacket.jpg?impolicy=cropped&amp;w=1200&amp;h=800&amp;x=0&amp;y=0" target="_leather" title="Image cropping demo"><picture>
<source media="(max-width : 480px)" srcset="retail_files/leather_jacket.jpg?imwidth=300&amp;impolicy=cropped 1x,
retail_files/leather_jacket.jpg?imwidth=600&amp;impolicy=cropped 2x,
retail_files/leather_jacket.jpg?imwidth=900&amp;impolicy=cropped 3x">
<source media="(max-width : 1024px)" srcset="retail_files/leather_jacket.jpg?imwidth=350&amp;impolicy=cropped 1x,
retail_files/leather_jacket.jpg?imwidth=700&amp;impolicy=cropped 2x">
<source media="(min-width : 1025px)" srcset="retail_files/leather_jacket.jpg?imwidth=600&amp;impolicy=rwdImages 1x,
retail_files/leather_jacket.jpg?imwidth=1200&amp;impolicy=rwdImages 2x">
<img src="./retail_files/leather_jacket.jpg" width="95%" onload="performance.clearMarks(&#39;img6 display&#39;); performance.mark(&#39;img6 display&#39;);">
</picture></a>
<h3>Leather Collection</h3>
<h2><em style="color:#999">Art direction with dynamic policies</em></h2>
</div>
</div>
<div id="vert-space"></div>
<div id="BottomList">
<div id="BottomContainer">
<div id="BottomDetail">
<b>Contact Us</b>
<ul>
<li><a title="Phone" href="/#Phone">Phone</a></li>
<li><a title="Email" href="/#Email">Email</a></li>
<li><a title="Mail" href="/#Mail">Mail</a></li>
<li><a title="Social Media" href="/#Social">Social Media</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>Departments</b>
<ul>
<li><a title="Men&#39;s" href="/#Mens">Men's</a></li>
<li><a title="Women&#39;s" href="/#Womens">Women's</a></li>
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>About Us</b>
<ul>
<li><a title="Press" href="/#Press">Press</a></li>
<li><a title="Careers" href="/#Careers">Careers</a></li>
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
</ul>
</div>
</div>
</div>
</body></html>

185
app/html/jacket.html Normal file
View File

@ -0,0 +1,185 @@
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
<title>Thirty-Three</title>
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
<style>
@charset "utf-8";
</style>
</head>
<body style="background-image: url(retail_files/background/background.jpg);background-repeat:no-repeat;max-width:1200px;margin-left:auto;margin-right:auto;">
<div style="padding:10px;overflow:auto;">
<div id="main-logo">
<div id="TextLogo"><a href="/">Thirty-Three</a></div>
</div>
<div id="MyNav">
<ul>
<li><a title="HOME" href="/">HOME</a></li>
<li><a title="MEN" href="/jacket.html">MEN</a></li>
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
</ul>
</div>
</div>
<style>
.container {
display: flex; box-sizing: border-box; padding: 5px 0px;
}
.panel {
box-sizing: border-box; width: calc(50% - 5px); height:100%; float: left; margin: 0 5px;
}
.vidDetails {
display:inline-block; margin:0 10px;
}
.vidDetails > p {
padding:4px 0px; font-size:1em;
}
.bold { font-weight:bold; }
.videoplayer { width: 98%; }
@media only screen and (max-width : 800px) {
.container { display: block; }
.panel { display: block; float: none; width: calc(100% - 20px); margin:10px; }
.videoplayer { width: 98%; }
}
.clear { display: block; margin:5px 0px; clear: both; }
</style>
<div id="productContainer" style="padding:10px;">
<div class="container">
<div class="panel" id="vPanel">
<p><b>IM Optimized</b></p>
<video class="videoplayer" id="myVideo1" poster="video/jacket-poster.jpg" controls="" playsinline="" muted="">
<source src="/video/jacket-new.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="panel" id="vPanel">
<p><b>Original (Pristine)</b></p>
<video class="videoplayer" id="myVideo2" poster="video/jacket-poster.jpg" controls="" playsinline="" muted="">
<source src="/video/jacket-new.mp4?imbypass=true" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<script>
var vid = document.getElementById("myVideo1");
var vid2 = document.getElementById("myVideo2");
var playPromise1;
var playPromise2;
function toggleVids(button) {
if (button.innerText == "Play Both Videos") {
// Play
playPromise1 = vid.play();
playPromise2 = vid2.play();
document.getElementById("btnToggleVids").innerText = "Pause Both Videos";
} else if (button.innerText == "Pause Both Videos") {
// Pause
checkVidState("pause");
document.getElementById("btnToggleVids").innerText = "Play Both Videos";
} else {
// Must be stop.
checkVidState("stop");
document.getElementById("btnToggleVids").innerText = "Play Both Videos";
}
}
function checkVidState(action) {
if (playPromise1 !== undefined) {
playPromise1.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
if (action == "pause") {
vid.pause();
} else {
vid.load();
}
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
if (playPromise2 !== undefined) {
playPromise2.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
if (action == "pause") {
vid2.pause();
} else {
vid2.load();
}
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
}
</script>
<div id="productDetails" style="border:none; text-align:center;padding:0px;">
<button id="btnToggleVids" onclick="toggleVids(this)" type="button" style="border:1px solid grey; font-size:14px; margin-right:10px; padding:10px;">Play Both Videos</button>
<button id="btnStopVids" onclick="toggleVids(this)" type="button" style="border:1px solid grey; font-size:14px; padding:10px;">Stop</button>
<noscript>You need Javascript enabled in the browser to control both videos at once.</noscript>
<div class="clear">&nbsp;</div>
</div>
</div>
<div id="vert-space"></div>
<div id="BottomList">
<div id="BottomContainer">
<div id="BottomDetail">
<b>Contact Us</b>
<ul>
<li><a title="Phone" href="/#Phone">Phone</a></li>
<li><a title="Email" href="/#Email">Email</a></li>
<li><a title="Mail" href="/#Mail">Mail</a></li>
<li><a title="Social Media" href="/#Social">Social Media</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>Departments</b>
<ul>
<li><a title="Men&#39;s" href="/#Mens">Men's</a></li>
<li><a title="Women&#39;s" href="/#Womens">Women's</a></li>
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>About Us</b>
<ul>
<li><a title="Press" href="/#Press">Press</a></li>
<li><a title="Careers" href="/#Careers">Careers</a></li>
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
</ul>
</div>
</div>
</div>
</body></html>

162
app/html/jewelry.html Normal file
View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
<title>Thirty-Three</title>
<link rel="stylesheet" type="text/css" href="./retail_files/styles.css">
<!-- Akamai Viewer Async Loader & Assets -->
<script>!function(a){var b=function(a,c){this._element=a,this._options=c,this._bindings=[],b.queue.push(this),b.runQueue()};b.queue=[],b.deps=0,b.depsNeeded=2,b.ready=function(){b.deps++,b.runQueue()},b.runQueue=function(){window.shoestring;b.deps<b.depsNeeded||b.queue.map(function(a){return a.instantiate()})},b.prototype.onInitialize=function(a){if(this._instantiated)return void a(this._viewer);this._bindings.push(a)},b.prototype.instantiate=function(){this._instantiated=!0;var a=window.shoestring,b=a(this._element);return b.bind("akamai-carousel-first-media-load",function(){a(b.attr("data-akamai-viewer-placeholder")).remove()}),b.bind("akamai-viewer-init",function(){this._bindings.forEach(function(a){a(this._viewer)}.bind(this))}.bind(this)),this._viewer=new Akamai.Viewer(this._element,this._options),this._instantiated=!0,this._viewer},a.Akamai=a.Akamai||{},a.Akamai.AsyncViewer=b}("undefined"==typeof exports?window:exports);</script>
<script src="/js/akamai-viewer.js" async onload="Akamai.AsyncViewer.ready()"></script>
<link href="/css/akamai-viewer.css" rel="stylesheet" media="none" onload="this.onload=null;this.media='all';Akamai.AsyncViewer.ready()">
<style>
@charset "utf-8";
#productContainer {overflow:auto;margin-left:auto; margin-right:auto;background-color: #ffffff;font-family: Verdana, Calibri; }
#productViewer {border: 1px solid grey;padding:15px;margin:10px;}
#productAction {border: 1px solid grey;padding:15px;margin:10px;}
#productDetails {border: 1px solid grey;padding:15px;margin:10px;text-align:left;color:grey;font-size:smaller;}
#action_detail {display:none;}
._button {width: 100%;background-color: #599197;font-size: 16px;border-radius: 10px;padding: 10px;border: none;font-family: verdana;font-weight: bold;color: white;}
._list {list-style: circle;list-style-position: inside;white-space: pre-line;}
._links {color:grey;font-size:smaller;}
._dropdown {width:80%;color:grey;height:25px;}
.widthControl{width:100%;margin-left:auto;margin-right:auto;}
@media only screen and (min-width : 800px) {
#productAction {width:225px;float:right;}
#productViewer {margin-right:280px;}
#action_detail {display:block;}
}
@media only screen and (min-width:1000px){
.widthControl{width:500px;}
}
</style>
</head>
<body style="background-image: url(retail_files/background/background.jpg);background-repeat:no-repeat;max-width:1200px;margin-left:auto;margin-right:auto;">
<div style="padding:10px;overflow:auto;">
<div id="main-logo">
<div id="TextLogo"><a href="/">Thirty-Three</a></div>
</div>
<div id="MyNav">
<ul>
<li><a title="HOME" href="/">HOME</a></li>
<li><a title="MEN" href="/jacket.html">MEN</a></li>
<li><a title="WOMEN" href="/womenstops.html">WOMEN</a></li>
<li><a title="ACCESSORIES" href="/jewelry.html">ACCESSORIES</a></li>
</ul>
</div>
</div>
<div id="productContainer" style="padding:10px;">
<div id="productAction">
Women's Ring <b>£2000</b><br><br>
<span id="action_detail">
<br><font color="maroon">* NEW IN *</font>
<br><br><img src="./retail_files/reviews.JPG">
<br><a href="/#" onclick="return false;" class="_links">18 Reviews</a>
<!--br><br><br><br><select class="_dropdown"><option>Small</option><option>Medium</option><option>Large</option></select>
<br><a href="#" onclick="return false;" class="_links">Size guide</a-->
</span>
<!--br><br><select class="_dropdown" onChange="changeTag(this.value);"><option value="Green">Green</option><option value="Blue">Blue</option><option value="Red">Red</option><option value="Pink">Pink</option></select-->
<br><br><button class="_button">Add to Basket</button>
<br><br><br><img src="./retail_files/social.JPG">
</div>
<div id="productViewer">
<div class="widthControl">
<div id="360Viewer" data-akamai-viewer="true" data-akamai-viewer-items-default-tag="akamai-untagged" data-akamai-viewer-items-render-all="false"></div>
</div>
</div>
<script>
var asyncViewer = new Akamai.AsyncViewer( document.getElementById( "360Viewer" ), {
spin360: {
autoplay: { enabled: true },
interval: 4400,
controls: {
arrows: true,
play: true
},
images: {
widths: ['320','640'],
sizes: '(min-width:1000px) 500px, 100vw'
}
},
items: {
//uri: "/retail_files/viewer/product.imviewer?aki_collection=akaRing"
uri: "json/ex-360-ring.json"
}
});
asyncViewer.onInitialize(function(_viewer){
window.viewer = _viewer;
});
</script>
<div id="productDetails">
<b>Details</b>
<br><br>
Since its creation over a century ago, the deep ring setting has been the world’s favorite engagement ring. The ring of rings, as it has been called, is the most brilliant ring ever. It is also the most beautiful.
<br><br>
Charles Michael Hughes recognized that an exceptional diamond should be heralded rather than hidden. So we handcrafted a ring with a diamond so rare, it deserved to be lifted above the band. In so doing, we created something not just brilliant, but legendary: the engagement ring as we know it today.
<br><br>
1.0 ct shown
<br><br>
Different variations of diamond availabe on request.
</div>
</div>
<div id="vert-space"></div>
<div id="BottomList">
<div id="BottomContainer">
<div id="BottomDetail">
<b>Contact Us</b>
<ul>
<li><a title="Phone" href="/#Phone">Phone</a></li>
<li><a title="Email" href="/#Email">Email</a></li>
<li><a title="Mail" href="/#Mail">Mail</a></li>
<li><a title="Social Media" href="/#Social">Social Media</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>Departments</b>
<ul>
<li><a title="Men&#39;s" href="/#Mens">Men's</a></li>
<li><a title="Women&#39;s" href="/#Womens">Women's</a></li>
<li><a title="Accessories" href="/#Accessories">Accessories</a></li>
<li><a title="Shoes" href="/#Shoes">Shoes</a></li>
</ul>
</div>
<div id="BottomDetail">
<b>About Us</b>
<ul>
<li><a title="Press" href="/#Press">Press</a></li>
<li><a title="Careers" href="/#Careers">Careers</a></li>
<li><a title="Privacy Policy" href="/#PrivacyPolicy">Privacy Policy</a></li>
<li><a title="Site Map" href="/#SiteMap">Site Map</a></li>
</ul>
</div>
</div>
</div>
</body></html>

2
app/html/js/akamai-async-loader.js Normal file
View File

@ -0,0 +1,2 @@
/*! Copyright 2019, Akamai Technologies, Inc. All Rights Reserved. akamai-viewer-0.7.2 */
!function(a){var b=function(a,c){this._element=a,this._options=c,this._bindings=[],b.queue.push(this),b.runQueue()};b.queue=[],b.deps=0,b.depsNeeded=2,b.ready=function(){b.deps++,b.runQueue()},b.runQueue=function(){window.shoestring;b.deps<b.depsNeeded||b.queue.map(function(a){return a.instantiate()})},b.prototype.onInitialize=function(a){if(this._instantiated)return void a(this._viewer);this._bindings.push(a)},b.prototype.instantiate=function(){this._instantiated=!0;var a=window.shoestring,b=a(this._element);return b.bind("akamai-carousel-first-media-load",function(){a(b.attr("data-akamai-viewer-placeholder")).remove()}),b.bind("akamai-viewer-init",function(){this._bindings.forEach(function(a){a(this._viewer)}.bind(this))}.bind(this)),this._viewer=new Akamai.Viewer(this._element,this._options),this._instantiated=!0,this._viewer},a.Akamai=a.Akamai||{},a.Akamai.AsyncViewer=b}("undefined"==typeof exports?window:exports);

85
app/html/js/akamai-async-loader.unmin.js Normal file
View File

@ -0,0 +1,85 @@
/*! Copyright 2019, Akamai Technologies, Inc. All Rights Reserved. akamai-viewer-0.7.2 */(function(exports){
/**
* Akamai AsyncViewer omni-component for async viewer loading and init
* @class
* @alias Akamai.AsyncViewer
* @param {HTMLElement} element - the DOM element representing the component markup
* @param {Object} options - configuration options
*
* @example <caption>Instantiation</caption>
* var element = document.querySelector( "[data-akamai-viewer]" );
* var viewer = Akamai.AsyncViewer( element, options );
* @returns AsyncViewer instance
*/
var AsyncViewer = function( elem, options ){
this._element = elem;
this._options = options;
this._bindings = [];
AsyncViewer.queue.push( this );
AsyncViewer.runQueue();
};
AsyncViewer.queue = [];
AsyncViewer.deps = 0;
AsyncViewer.depsNeeded = 2;
AsyncViewer.ready = function(){
AsyncViewer.deps++;
AsyncViewer.runQueue();
};
AsyncViewer.runQueue = function(){
var domLib = window.shoestring;
if( AsyncViewer.deps < AsyncViewer.depsNeeded ){
return;
}
AsyncViewer.queue.map(function(viewer){
return viewer.instantiate();
});
};
/**
* onInitialize callback - access the viewer instance
*
*
* @callback
* @example <caption>Callback function usage</caption>
* var asyncViewer = new Akamai.AsyncViewer( element, options );
* asyncViewer.onInitialize(function(viewer){
* console.log(viewer.getCarousels());
* });
*/
AsyncViewer.prototype.onInitialize = function(binding){
if(this._instantiated){
binding(this._viewer);
return;
}
this._bindings.push(binding);
};
AsyncViewer.prototype.instantiate = function(){
this._instantiated = true;
var domLib = window.shoestring;
var $element = domLib(this._element);
$element.bind( "akamai-carousel-first-media-load", function(){
domLib( $element.attr("data-akamai-viewer-placeholder") ).remove();
});
$element.bind("akamai-viewer-init", function(){
this._bindings.forEach(function(binding){
binding(this._viewer);
}.bind(this));
}.bind(this));
this._viewer = new Akamai.Viewer(this._element, this._options);
this._instantiated = true;
return this._viewer;
};
exports.Akamai = exports.Akamai || {};
exports.Akamai.AsyncViewer = AsyncViewer;
})(typeof exports === 'undefined'? window : exports);

8476
app/html/js/akamai-viewer.es2015 Normal file
View File

File diff suppressed because it is too large Load Diff

4
app/html/js/akamai-viewer.js Normal file
View File

File diff suppressed because one or more lines are too long

1
app/html/js/akamai-viewer.js.map Normal file
View File

File diff suppressed because one or more lines are too long

8055
app/html/js/akamai-viewer.unmin.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
app/html/js/akamai-viewer.unmin.js.map Normal file
View File

File diff suppressed because one or more lines are too long

9630
app/html/js/docs.es2015 Normal file
View File

File diff suppressed because it is too large Load Diff

9183
app/html/js/docs.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
app/html/js/docs.js.map Normal file
View File

File diff suppressed because one or more lines are too long

60
app/html/json/backpack-1.json Normal file
View File

@ -0,0 +1,60 @@
{
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_1_1_1.jpg",
"tag": "full",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_2_1.jpg",
"tag": "full",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_3_1.jpg",
"tag": "full",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_4_1.jpg",
"tag": "full",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_5_1.jpg",
"tag": "closeup",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_6_1.jpg",
"tag": "closeup",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_2_7_1.jpg",
"tag": "closeup",
"poster": "",
"mime": "",
"alt": ""
}
]
}

61
app/html/json/bag-1.json Normal file
View File

@ -0,0 +1,61 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/blue/TB_40199_104_I.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/blue/TB_40199_104_J.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/blue/TB_40199_403.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/blue/TB_40199_403_A.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/blue/TB_40199_403_B.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/tan/TB_40199_104.jpg",
"tags":[
"tan"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/tan/TB_40199_104_A.jpg",
"tags":[
"tan"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/bags/1/tan/TB_40199_104_B.jpg",
"tags":[
"tan"
]
}
]
}

45
app/html/json/car-1.json Normal file
View File

@ -0,0 +1,45 @@
{
"version":1,
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
}
]
}

122
app/html/json/car-2.json Normal file
View File

@ -0,0 +1,122 @@
{
"version":1,
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"blue"
],
"poster": "",
"mime": "",
"alt": ""
}
]
}

89
app/html/json/car-3.json Normal file
View File

@ -0,0 +1,89 @@
{
"version":1,
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"black"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"black"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
"black"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
"black"
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type":"spin360",
"tags":[
"black"
],
"urls":[
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw00.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw01.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw02.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw03.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw04.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw05.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw06.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw07.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw08.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw09.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw10.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw11.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw12.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw13.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw14.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw15.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw16.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw17.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw18.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw19.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw20.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw21.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw22.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw23.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw24.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw25.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw26.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw27.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw28.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw29.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw30.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw31.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw32.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw33.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw34.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw35.jpg"
]
}
]
}

82
app/html/json/clothing-1.json Normal file
View File

@ -0,0 +1,82 @@
{
"version":1,
"items":[
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/16314.mp4",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816_B.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816_D.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816_E.jpg",
"tags":[
"red"
]
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/9218.mp4",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100_B.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100_C.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100_D.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100_M.jpg",
"tags":[
"white"
]
}
]
}

110
app/html/json/clothing-2.json Normal file
View File

@ -0,0 +1,110 @@
{
"version":1,
"items":[
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/31945.mp4",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_A.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_B.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_C.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_D.jpg",
"tags":[
"blue"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_E.jpg",
"tags":[
"blue"
]
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/10694.mp4",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_A.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_B.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_C.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_D.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_E.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_M.jpg",
"tags":[
"green"
]
}
]
}

82
app/html/json/clothing-3.json Normal file
View File

@ -0,0 +1,82 @@
{
"version":1,
"items":[
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/12543.mp4",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/TB_37699_816.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/TB_37699_816_B.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/TB_37699_816_C.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/TB_37699_816_D.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/red/TB_37699_816_E.jpg",
"tags":[
"red"
]
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/white/31785.mp4",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/white/TB_37699_100.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/white/TB_37699_100_B.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/white/TB_37699_100_C.jpg",
"tags":[
"white"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/3/white/TB_37699_100_E.jpg",
"tags":[
"white"
]
}
]
}

145
app/html/json/clothing-4.json Normal file
View File

@ -0,0 +1,145 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/green/TB_37238_316.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/green/TB_37238_316_B.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/green/TB_37238_316_C.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/green/TB_37238_316_D.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/green/TB_37238_316_E.jpg",
"tags":[
"green"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/navy/TB_37238_405.jpg",
"tags":[
"navy"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/navy/TB_37238_405_B.jpg",
"tags":[
"navy"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/navy/TB_37238_405_C.jpg",
"tags":[
"navy"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/navy/TB_37238_405_D.jpg",
"tags":[
"navy"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/navy/TB_37238_405_E.jpg",
"tags":[
"navy"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/pink/TB_37238_693.jpg",
"tags":[
"pink"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/pink/TB_37238_693_B.jpg",
"tags":[
"pink"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/pink/TB_37238_693_C.jpg",
"tags":[
"pink"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/pink/TB_37238_693_D.jpg",
"tags":[
"pink"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/pink/TB_37238_693_E.jpg",
"tags":[
"pink"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/red/TB_37238_619.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/red/TB_37238_619_B.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/red/TB_37238_619_C.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/red/TB_37238_619_D.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/4/red/TB_37238_619_E.jpg",
"tags":[
"red"
]
}
]
}

26
app/html/json/dress-1.json Normal file
View File

@ -0,0 +1,26 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/5/0400093813913.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/5/0400093813913_A1.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/5/0400093813913_ASTL.jpg",
"tags":[
"default"
]
}
]
}

33
app/html/json/dress-2.json Normal file
View File

@ -0,0 +1,33 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/1/0400093109445.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/1/0400093109445_A1.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/1/0400093109445_A2.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/1/0400093109445_ASTL.jpg",
"tags":[
"default"
]
}
]
}

26
app/html/json/dress-3.json Normal file
View File

@ -0,0 +1,26 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/4/0400094196304.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/4/0400094196304_A1.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/4/0400094196304_ASTL.jpg",
"tags":[
"default"
]
}
]
}

26
app/html/json/dress-4.json Normal file
View File

@ -0,0 +1,26 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/2/0400093109886_A1.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/2/0400093109886_A2.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/2/0400093109886_ASTL.jpg",
"tags":[
"default"
]
}
]
}

26
app/html/json/dress-5.json Normal file
View File

@ -0,0 +1,26 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/3/0400093612458.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/3/0400093612458_A1.jpg",
"tags":[
"default"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/dress/3/0400093612458_ASTL.jpg",
"tags":[
"default"
]
}
]
}

84
app/html/json/dress-6.json Normal file
View File

@ -0,0 +1,84 @@
{
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/black1.png",
"tag": "black",
"poster": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/black1.png",
"mime": "video/mp4",
"alt": ""
},
{
"type": "video",
"url": "http://a9.g.akamai.net/f/9/359726/1m/im-test.download.akamai.com/359726/demo/video/dress-black.mp4",
"tag": "black",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/black2.png",
"tag": "black",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/black3.png",
"tag": "black",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/black4.png",
"tag": "black",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/silver1.png",
"tag": "silver",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "video",
"url": "http://a9.g.akamai.net/f/9/359726/1m/im-test.download.akamai.com/359726/demo/video/dress-silver.mp4",
"tag": "silver",
"poster": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/silver1.png",
"mime": "video/mp4",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/silver2.png",
"tag": "silver",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/silver3.png",
"tag": "silver",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/midi-dress/images/silver4.png",
"tag": "silver",
"poster": "",
"mime": "",
"alt": ""
}
]
}

93
app/html/json/ex-360-bike.json Normal file
View File

@ -0,0 +1,93 @@
{
"version":1,
"items":[
{
"type":"spin360",
"tags":[
"grey"
],
"urls":[
"//productdemo.akaimaging.com/akamai-viewer/360/bike/1.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/2.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/3.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/4.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/5.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/6.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/7.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/8.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/9.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/36.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/37.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/38.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/39.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/40.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/41.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/42.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/43.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/44.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/45.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/46.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/47.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/48.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/49.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/50.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/51.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/52.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/53.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/54.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/55.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/56.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/57.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/58.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/59.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/60.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/61.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/62.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/63.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/64.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/65.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/66.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/67.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/68.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/69.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/70.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/71.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/72.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/73.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/74.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/75.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/76.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/77.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/78.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/79.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/bike/80.jpg"
]
}
]
}

49
app/html/json/ex-360-bmw.json Normal file
View File

@ -0,0 +1,49 @@
{
"version":1,
"items":[
{
"type":"spin360",
"tags":[
"360"
],
"urls":[
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw00.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw01.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw02.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw03.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw04.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw05.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw06.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw07.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw08.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw09.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw10.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw11.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw12.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw13.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw14.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw15.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw16.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw17.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw18.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw19.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw20.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw21.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw22.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw23.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw24.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw25.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw26.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw27.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw28.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw29.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw30.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw31.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw32.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw33.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw34.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw35.jpg"
]
}
]
}

52
app/html/json/ex-360-chair.json Normal file
View File

@ -0,0 +1,52 @@
{
"version":1,
"items":[
{
"type":"spin360",
"tags":[
"black"
],
"urls":[
"//productdemo.akaimaging.com/akamai-viewer/360/chair/1.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/2.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/3.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/4.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/5.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/6.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/7.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/8.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/9.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/36.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/37.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/38.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/chair/39.jpg"
]
}
]
}

73
app/html/json/ex-360-ring.json Normal file
View File

@ -0,0 +1,73 @@
{
"version":1,
"items":[
{
"type":"spin360",
"tags":[
"gold"
],
"urls":[
"//productdemo.akaimaging.com/akamai-viewer/360/ring/1.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/2.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/3.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/4.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/5.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/6.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/7.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/8.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/9.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/36.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/37.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/38.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/39.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/40.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/41.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/42.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/43.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/44.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/45.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/46.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/47.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/48.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/49.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/50.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/51.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/52.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/53.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/54.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/55.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/56.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/57.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/58.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/59.jpg",
"//productdemo.akaimaging.com/akamai-viewer/360/ring/60.jpg"
]
}
]
}

1
app/html/json/issue-246.json Normal file
View File

@ -0,0 +1 @@
{"version":1,"items":[{"type":"video","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/10694.mp4","tags":["green"],"poster":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_A.jpg","mime":"video/mp4"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_A.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_B.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_C.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_D.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_E.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/green/TB_35374_348_M.jpg","tags":["green"],"poster":"","mime":"image/jpeg"},{"type":"video","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/31945.mp4","tags":["navy"],"poster":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_D.jpg","mime":"video/mp4"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_A.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_B.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_C.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_D.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"},{"type":"image","url":"http://productdemo.akaimaging.com/akamai-viewer/tb/clothing/1/blue/TB_35374_438_E.jpg","tags":["navy"],"poster":"","mime":"image/jpeg"}]}

105
app/html/json/mixmedia.json Normal file
View File

@ -0,0 +1,105 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816_E.jpg",
"tags":[
]
},
{
"type": "image",
"url": "//akapies.akaimaging.com/product-viewer-im/products/backpack/images/6572105009_1_1_1.jpg",
"tags":[
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tags":[
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/TB_37463_816.jpg",
"tags":[
]
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/red/16314.mp4",
"tags":[
]
},
{
"type": "image",
"url": "//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tags":[
],
"poster": "",
"mime": "",
"alt": ""
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/9218.mp4",
"tags":[
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/tb/clothing/2/white/TB_37463_100.jpg",
"tags":[
]
},
{
"type":"spin360",
"tags":[
],
"urls":[
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw00.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw01.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw02.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw03.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw04.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw05.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw06.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw07.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw08.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw09.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw10.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw11.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw12.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw13.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw14.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw15.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw16.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw17.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw18.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw19.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw20.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw21.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw22.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw23.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw24.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw25.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw26.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw27.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw28.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw29.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw30.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw31.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw32.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw33.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw34.jpg",
"//akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw35.jpg"
]
}
]
}

65
app/html/json/sample.json Normal file
View File

@ -0,0 +1,65 @@
{
"items": [
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"tag": "Back",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "image",
"url": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwFront.jpg",
"tag": "Front",
"poster": "",
"mime": "",
"alt": ""
},
{
"type": "spin360",
"tag": "360",
"poster": "http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmwBack.jpg",
"mime": "",
"alt": "",
"urls": [
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw00.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw01.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw02.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw03.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw04.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw05.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw06.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw07.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw08.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw09.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw10.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw11.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw12.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw13.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw14.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw15.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw16.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw17.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw18.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw19.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw20.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw21.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw22.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw23.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw24.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw25.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw26.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw27.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw28.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw29.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw30.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw31.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw32.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw33.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw34.jpg",
"http://akapies.akaimaging.com/product-viewer-im/products/bmw/images/bmw35.jpg"
]
}
]
}

54
app/html/json/shoes-1.json Normal file
View File

@ -0,0 +1,54 @@
{
"version":1,
"items":[
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/black/0452598291986_BLACK.jpg",
"tags":[
"black"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/red/0452598291986_RED.jpg",
"tags":[
"red"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/tan/0452598291986.jpg",
"tags":[
"tan"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/tan/0452598291986_A1.jpg",
"tags":[
"tan"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/tan/0452598291986_A2.jpg",
"tags":[
"tan"
]
},
{
"type":"video",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/tan/0452598291986_V486x648.mp4",
"tags":[
"tan"
]
},
{
"type":"image",
"url":"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/1/white/0452598291986_WHITE.jpg",
"tags":[
"white"
]
}
]
}

121
app/html/json/shoes-2.json Normal file
View File

@ -0,0 +1,121 @@
{
"version": 1,
"items": [
{
"type": "spin360",
"tags": [
"blue"
],
"urls": [
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_01.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_02.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_03.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_04.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_05.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_06.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_07.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_08.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_09.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_01_36.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_01.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_02.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_03.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_04.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_05.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_06.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_07.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_08.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_09.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_02_36.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_01.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_02.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_03.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_04.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_05.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_06.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_07.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_08.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_09.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_10.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_11.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_12.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_13.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_14.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_15.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_16.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_17.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_18.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_19.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_20.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_21.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_22.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_23.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_24.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_25.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_26.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_27.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_28.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_29.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_30.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_31.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_32.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_33.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_34.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_35.jpg",
"//productdemo.akaimaging.com/akamai-viewer/sacks/shoes/2/0400093017514_ROCCIA_S_03_36.jpg"
]
}
]
}

BIN
app/html/learn/akam.mp4 Normal file
View File

Binary file not shown.

BIN
app/html/learn/akam.mp4.bak Normal file
View File

Binary file not shown.

BIN
app/html/learn/black.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
app/html/learn/cream.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
app/html/learn/cream.png.bak Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
app/html/learn/dog.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
app/html/learn/dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

BIN
app/html/learn/globe.mp4 Normal file
View File

Binary file not shown.

BIN
app/html/learn/globe.mp4.bak Normal file
View File

Binary file not shown.

BIN
app/html/learn/golden.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
app/html/learn/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 819 KiB

BIN
app/html/learn/video.mp4 Normal file
View File

Binary file not shown.

31
app/html/login.php Normal file
View File

@ -0,0 +1,31 @@
<?php
$message="";
if(count($_POST)>0) {
if(($_POST["user_name"] == "akamai") && ($_POST["password"] == "akamai")){
setcookie("LOGIN", "true");
header("Location:index.php");
} else {
$message = "Invalid Username or Password!";
}
}
?>
<html>
<head>
<title>User Login</title>
</head>
<body>
<form name="frmUser" method="post" action="" align="center">
<div class="message"><?php if($message!="") { echo $message; } ?></div>
<h3 align="center">Enter Login Details</h3>
Username:<br>
<input type="text" name="user_name">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

20
app/html/login.php.1 Normal file
View File

@ -0,0 +1,20 @@
<html>
<head>
<title>User Login</title>
</head>
<body>
<form name="frmUser" method="post" action="" align="center">
<div class="message"></div>
<h3 align="center">Enter Login Details</h3>
Username:<br>
<input type="text" name="user_name">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

4
app/html/logout.php Normal file
View File

@ -0,0 +1,4 @@
<?php
setcookie("LOGIN", "false");
header("Location:/index.php");
?>

9
app/html/mobiletest.php Normal file
View File

@ -0,0 +1,9 @@
<?php
$headers = apache_request_headers();
$is_mobile = $headers['is_mobile'];
if($is_mobile == "true"){
header('Location: /m.html');
}else{
header('Location: /index.html');
}
?>

1
app/html/playground/index.html Normal file
View File

@ -0,0 +1 @@
Akamai EdgeWorkers Playground

11
app/html/retail_files/3N6GS-5YDCC-BR86J-9HVNA-4D9WT Normal file
View File

File diff suppressed because one or more lines are too long

BIN
app/html/retail_files/accessories.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 KiB

BIN
app/html/retail_files/background/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
app/html/retail_files/jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
app/html/retail_files/leather_jacket.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 KiB

BIN
app/html/retail_files/mens_accessories.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

Some files were not shown because too many files have changed in this diff Show More