PSDcover AR mockup player - YOGURT-PACKAGING-SNAP-LID-16OZ-MOCKUP-94X94

Embed AR Player
/* *************************************************************************
     INSTRUCTIONS: How to embed the above player into your web page
************************************************************************* */
//   The AR Player requires 4 parts to operate as intended.  The 4 areas
//   where the code needs to be copied to can be seen in the following 
//   simplified web page structure:
     <!DOCTYPE html>
     <html>
       <head>
         <title>Title of your web page</title>
         [1] JAVASCRIPT
         [2] PLAYER JS
         [3] CSS STYLES
       </head>
       <body>
         [4] HTML ELEMENT
       </body>
     </html>
//   Copy the code blocks below into your web page using the
//   structure above as your guide.

[1] Javascript
<!-- // • Loads and caches the AR mockup images
     // • Makes the AR Mockup spinnable  -->
        
     <script type="text/javascript">
       Player={};Player.version="1.1.0";Player.defaults={id:"player",width:520,height:392,rho:[],theta:[]};Player.applyMask=function(b,a){return b.mask==undefined||b.mask==""?a:b.mask.replace("{id}",a)};Player.initimg=function(e,c,b,d){var a=e.theta[b]+"_"+e.rho[c];return Player._initimg(e,Player.applyMask(e,a),d)};Player._initimg=function(e,b,d){var c=e.base==undefined||e.base==""?"./":e.base+"/";var a=new Image();a.src=c+b;if(d!=undefined){a.onload=d}var f=document.createElement("div");f.style.backgroundImage=undefined;f.classList.add("hidden");f.appendChild(a);return a};Player.init=function(args){if(Player.debug){console.log("Player.js by HaptUX Inc., version "+Player.version)}if(Player.debug){console.log("start: "+args.id)}var id=args.id;if(id==undefined){if(Player.debug){console.log("id: undefined...")}return}try{if(Player[id]==undefined){Player[id]={}}var o=Player[id];o.mobile=typeof window.orientation!=="undefined";if(!o.drag_to_spin){o.drag_to_spin=o.mobile?"Tap to spin":"Drag to spin"}var _css=Player.clone(Player._css);for(var i in Player.defaults){if(o[i]==undefined){o[i]=Player.defaults[i]}}if(args!=undefined){for(var a in args){o[a]=args[a]}}o.o=document.getElementById(o.id);o.start=function(e){o.o.classList.remove("pointer");o.o.onmousedown=undefined;delete o.click_to_start;Player.init({id:o.id})};o.img=[];if(o.slide_show!=undefined||o.auto!=undefined){o.idx=-1;var notrn;if(o.slide_show){for(var n in o.slide_show){var img=Player._initimg(o,(o.slide_show[n]["id"]?Player.applyMask(o,o.slide_show[n]["id"]):o.slide_show[n]["src"]),function(){this.parentElement.style.backgroundImage="url('"+this.src+"')"});o.o.appendChild(img.parentElement);o.img.push(img);if(o.slide_show[n]["inner"]){var div=document.createElement("div");div.innerHTML=o.slide_show[n]["inner"];img.parentElement.append(div)}}}if(o.auto){for(var n in o.auto){var img=Player._initimg(o,Player.applyMask(o,o.auto[n]),function(){this.parentElement.style.backgroundImage="url('"+this.src+"')"});o.o.appendChild(img.parentElement);o.img.push(img);if(n==0){img.parentElement.classList.remove("hidden")}}}if(o.click_to_start){o.o.classList.add("pointer");o.o.onmousedown=function(e){delete o.slide_show;delete o.auto;o.start.call(null)}}o.pause=function(){o.paused=1;o.pause_pending=1};o.play=function(){if(!o.paused){return}delete o.paused;o.rotate()};o.select=function(i){if(i<0||i>o.img.length-1){return}var pidx=o.idx;o.idx=i;if(!o.paused){o.skip=1}o.show(o.idx,pidx)};o.next=function(){var pidx=o.idx;if(++o.idx>o.img.length-1){o.idx=0}if(!o.paused){o.skip=1}o.show(o.idx,pidx)};o.previous=function(){var pidx=o.idx;if(--o.idx<0){o.idx=o.img.length-1}if(!o.paused){o.skip=1}o.show(o.idx,pidx)};o.show=function(idx,pidx){if(idx==pidx){return}o.idx=idx;var delay=Number(o.delay)?Number(o.delay)*1000:2000;if(o.img[o.idx]&&o.img[o.idx].parentElement.style.backgroundImage!=undefined){if(o.img[pidx]){o.img[pidx].parentElement.classList.add("hidden")}o.img[o.idx].parentElement.classList.remove("hidden");if(o.slide_show){if(Number(o.slide_show[o.idx]["d"])){delay=Number(o.slide_show[o.idx]["d"])*1000}if(!o.click_to_start){if(o.slide_show[o.idx]["a"]){o.o.onclick=function(e){document.location=o.slide_show[o.idx]["a"]};o.o.classList.add("pointer")}else{o.o.onclick=undefined;o.o.classList.remove("pointer")}var cb=o.slide_show[o.idx]["cb"]?o.slide_show[o.idx]["cb"]:o.cb;if(cb){try{eval(cb+".call(null, o.idx);")}catch(e){if(Player.debug){console.log(e)}}}}}}return delay};o.rotate=function(){if(o.pause_pending){delete o.pause_pending;return}if(o.paused||!o.slide_show&&!o.auto){return}if(o.skip){delete o.skip;window.setTimeout(o.rotate,delay);return}var pidx=o.idx;if(++o.idx>o.img.length-1){o.idx=0}var delay=o.show(o.idx,pidx);window.setTimeout(o.rotate,delay)};if(o.transition){_css["#%id% > div.hidden"]=_css["#%id% > div.hidden"].concat(Player.browsers("transition","opacity "+o.transition))}o.rotate()}else{if(o.click_to_start){o.o.classList.add("pointer");if(o.theta!=undefined||o.rho!=undefined){o.o.onmousedown=o.start}}else{try{while(o.o.firstChild){o.o.removeChild(o.o.firstChild)}}catch(e){}o.spin=o.rho[0]=="0"&&Number(o.rho[o.rho.length-1])==360*(1-1/o.rho.length);if(o.ir!=undefined){o.ir=Number(o.ir);for(var i in o.rho){if(Number(o.rho[i])==o.ir){o.ir=Number(i)}}}if(o.ir==undefined||o.rho[o.ir]==undefined){o.ir=o.spin?0:Math.round((o.rho.length-1)/2)}if(o.it!=undefined){o.it=Number(o.it);for(var i in o.theta){if(Number(o.theta[i])==o.it){o.it=Number(i)}}}if(o.it==undefined||o.theta[o.it]==undefined){o.it=Math.round((o.theta.length-1)/2)}var img=Player.initimg(o,o.ir,o.it);o.o.appendChild(img);o.o.style.backgroundImage="url('"+img.src+"')";img.parentElement.classList.remove("hidden");o.dragtospin=document.getElementById(o.id+"_dragtospin");if(o.dragtospin==undefined){o.dragtospin=document.createElement("div");o.dragtospin.setAttribute("id",o.id+"_dragtospin");o.dragtospin.classList.add("dragtospin");if(!o.o.classList.contains("move")){o.o.classList.add("move")}}else{if(o.dragtospin.classList.contains("hidden")){o.dragtospin.classList.remove("hidden")}try{o.dragtospin.parentElement.removeChild(o.dragtospin)}catch(e){}}o.count=0;o.total=o.rho.length*o.theta.length;for(var t in o.theta){o.img.push([]);for(var r in o.rho){var img=Player.initimg(o,r,t,function(){if(o.dragtospin!=undefined){o.dragtospin.innerHTML=""+(++o.count"}});if(o.ir!=r||o.it!=t){o.o.appendChild(img)}o.img[t].push(img)}}o.o.appendChild(o.dragtospin);o.o.ontouchstart=function(e){var o=Player[this.id];if(e.changedTouches[1]){return}Player.start(o,e.changedTouches[0]);o.o.ontouchmove=function(e){Player.move(o,e.changedTouches[0])};o.o.ontouchend=function(e){Player.clear(o,e)};o.o.ontouchcancel=function(e){Player.clear(o,e)}};o.o.onmousedown=function(e){var o=Player[this.id];Player.start(o,e);o.o.onmousemove=function(e){Player.move(o,e)};o.o.onmouseup=function(e){Player.clear(o,e)};o.o.onmouseout=function(e){Player.clear(o,e)}}}}_css["#%id%"]=_css["#%id%"].concat(o.fit_parent?[{height:"100%"},{"background-size":"auto 100%"}]:[{width:o.width+"px"},{height:o.height+"px"}]);Player.css(o,_css)}catch(ee){if(Player.debug){console.log(ee)}}};Player._css={"#%id%":[{"background-repeat":"no-repeat"},{"background-color":"transparent"},{"background-position":"center center"},{"-webkit-user-select":"none"},{"-khtml-user-select":""},{"-moz-user-select":""},{"-o-user-select":""},{"-ms-user-select":""},{"user-select":""},{position:"relative"}],"#%id% > div":[{position:"absolute"},{height:"100%"},{width:"100%"},{"background-size":"auto 100%"},{opacity:"1"},{"background-position":"center"},{"z-index":"10"}],"#%id% > div.hidden":[{opacity:"0"},{"pointer-events":"none"},{"z-index":"11"}],"#%id% img":[{display:"none"}],"#%id%.pointer":[{cursor:"pointer"}],"#%id%.move":[{cursor:"move"}]};Player.css=function(f,b){function d(p){var m="",e,n="";for(var l in p){m+=l.replace("%id%",f.id)+" {\n";for(var h in p[l]){e=Object.keys(p[l][h])[0];m+=e+": "+(p[l][h][e]==""?n:p[l][h][e])+";\n";if(p[l][h][e]!=""){n=p[l][h][e]}}m+="}\n"}return m}var g=document.getElementById(f.id+"_css");try{if(g!=undefined){document.getElementsByTagName("head")[0].removeChild(g)}}catch(c){}var a=document.createElement("style");a.type="text/css";a.setAttribute("id",f.id+"_css");if(a.styleSheet){a.styleSheet.cssText=d(b)}else{a.appendChild(document.createTextNode(d(b)))}document.getElementsByTagName("head")[0].appendChild(a)};Player.start=function(b,a){if(b.count!=b.total){return}b.scaleX=b.o.offsetWidth/40;b.scaleY=b.o.offsetHeight/30;b.x=a.screenX;b.y=a.screenY;if(!b.mobile){if(b.dragtospin!=undefined){b.dragtospin.classList.add("hidden")}}};Player.move=function(d,b){var a=d.ir+(b.screenX>d.x?Math.floor((b.screenX-d.x)/d.scaleX):-Math.floor((d.x-b.screenX)/d.scaleX));var c=d.it-(b.screenY>d.y?Math.floor((b.screenY-d.y)/d.scaleY):-Math.floor((d.y-b.screenY)/d.scaleY));if(c>=d.theta.length){c=d.theta.length-1;d.y=b.screenY}else{if(c<0){c=0;d.y=b.screenY}}if(a>=d.rho.length){a=d.spin?0:d.rho.length-1;d.x=b.screenX}else{if(a<0){a=d.spin?d.rho.length-1:0;d.x=b.screenX}}if((c!=d.it)||(a!=d.ir)){d.x=b.screenX;d.y=b.screenY;d.o.style.backgroundImage="url('"+d.img[c][a].src+"')";d.it=c;d.ir=a}};Player.clear=function(c,b){if(c==undefined||c.o==undefined){return}if(c.mobile&&(b instanceof TouchEvent)){var a=c.o;if(c.touch_spin){c.touch_spin=undefined;while(a=a.parentElement){a.style.touchAction=""}if(c.dragtospin!=undefined){c.dragtospin.classList.remove("hidden")}c.o.ontouchmove=undefined;c.o.ontouchend=undefined;c.o.ontouchcancel=undefined}else{c.touch_spin=1;while(a=a.parentElement){a.style.touchAction="none"}if(c.dragtospin!=undefined){c.dragtospin.classList.add("hidden")}}}else{if(!c.mobile){if(c.dragtospin!=undefined){c.dragtospin.classList.remove("hidden")}c.o.onmousemove=undefined;c.o.onmouseup=undefined;c.o.onmouseout=undefined}}};Player.browser_styles=function(b,a){return"\"'-webkit-"+b+"': '"+a+"'\", \"'-moz-"+b+"': '"+a+"'\", \"'-o-"+b+"': '"+a+"'\", \"'-ms-"+b+"': '"+a+"'\", \"'"+b+"': '"+a+"'\""};Player.browsers=function(k,v){return eval("[{'-webkit-"+k+"': v}, {'-moz-"+k+"': v}, {'-o-"+k+"': v}, {'-ms-"+k+"': v}, {'"+k+"': v}]")};Player.clone=function(b){var d=[];for(var c in b){d[c]=b[c].slice(0)}return d};
     </script>

[2] Player JS <script type="text/javascript"> function init() { id: 'player', drag_to_spin: 'Drag to Spin', width: 960, height: 540, it: 75, ir: 345, theta: [0,15,30,45,60,75,90], rho: [0,15,30,45,60,75,90,105,120,135,150,165,180,195,210,225,240,255,270,285,300,315,330,345], base: './img', mask: '{id}.jpg' } window.onload = init; </script>

[3] CSS .player { display: table; margin: 0 auto; } .dragtospin { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; cursor:pointer; position:absolute; text-align:center; top: 50%; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); width:100%; } .dragtospin span { display: block; position: relative; top: 50%; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color: #fff; max-width: 100px; min-height: 108px; margin: 0 auto; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3OTAxQTI5NEI0RDAxMUU4QUU3QkFDMEFBMzFEQjhCRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3OTAxQTI5NUI0RDAxMUU4QUU3QkFDMEFBMzFEQjhCRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc5MDFBMjkyQjREMDExRThBRTdCQUMwQUEzMURCOEJGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc5MDFBMjkzQjREMDExRThBRTdCQUMwQUEzMURCOEJGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ggmE4AAABn9JREFUeNrsnAls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"); background-repeat: no-repeat; background-position: center 15px; background-color: rgba(93,95,198,.9); overflow: hidden; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .dragtospin span strong { position:absolute; bottom:0px; left:0px; width:100%; font-weight:600; padding-bottom:8px; }

[4] HTML <div class="player"> <div id="player"></div> </div>

Online Help// The code above represents the baseline AR player functionality. For // additional features such as creating a slideshow or auto play mode // please click Learn more...
Learn more...