<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<title></title>

		<script src="js/panorama.min.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="css/jqfancy.css" />
		<script src="js/jqfancy.min.js"></script>

<style>
	body{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	text-align: center;
	background-color: #000000;
	color: #3c3c3c;
	font-size: 14px;
	font-weight: 300;
	}
	
			.fancybox-is-open .fancybox-bg {
    		background: #000000;
			opacity: 0.9;
			}
			
			.fancybox-button {
   			 background: rgba(0, 0, 0, 0.6);
			}
			.fancybox-button:hover {
			opacity: 1;
			}
			
			.fancybox-caption{
				font-size: 25px;
			}
			.fancybox-close-small{
				padding: 0;
				top: -50px;
			}
			.fancybox-button{
				width: 46px;
				height: 46px;
			}
			.fancybox-toolbar{
				right: 20px;
				top: 20px;
			}
	
			.fancybox-slide--image .fancybox-content {			
				max-width: 1920px;
				margin: 0 auto;
			}
	
			.fancybox-button--close{
				width: 106px;
				height: 46px;
				opacity: 0.8;
			}
	
			.fancybox-button--close:after {
				content: url(img/volver-pv.png);
				z-index: 99999;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.fancybox-button--zoom{
				visibility: hidden;
			}
		
</style>  
  
</head>

<body>
	
	<a-scene>
 		<a-assets>
			<img id="360" src="img/victoria-360.jpg">
			<img id="circle-salon" src="img/link-salon.png">    
			<img id="circle-juegos" src="img/link-juegos.png">  
			<img id="circle-gym" src="img/link-gym.png"> 
     		<img id="circle-teens" src="img/link-jovenes.png"> 
     		<img id="circle-vista" src="img/link-vista.png"> 
	    </a-assets>
  		
   		<a-sky src="#360" rotation="0 -92 0" >
			<a-entity class="link" geometry="primitive: plane; width: 6.8; height: 6.8;" material="src: #circle-vista; side: double; transparent: true; opacity: 1" id="vista" position="40 3 0" rotation="0 90 0" >
			</a-entity>
			<a-entity class="link" geometry="primitive: plane; width: 6.8; height: 6.8;" material="src: #circle-juegos; side: double; transparent: true; opacity: 1" id="juegos" position="-25 3 25" rotation="0 0 0" >
			</a-entity>
			<a-entity class="link" geometry="primitive: plane; width: 6.8; height: 6.8;" material="src: #circle-gym; side: double; transparent: true; opacity: 1" id="gym" position="-4 3 25" rotation="0 0 0" >
			</a-entity> 			
 			<a-entity class="link" geometry="primitive: plane; width: 6.8; height: 6.8;" material="src: #circle-teens; side: double; transparent: true; opacity: 1" id="teens" position="34 3 25" rotation="0 8 0" >
			</a-entity>
  			<a-entity class="link" geometry="primitive: plane; width: 6.8; height: 6.8;" material="src: #circle-salon; side: double; transparent: true; opacity: 1" id="salon" position="65 3 25" rotation="0 45 0" >
			</a-entity>  			
   		</a-sky>
   		
		<a-camera fov="70" look-controls="reverseMouseDrag: true; hmdEnabled:false" cursor="rayOrigin: mouse"><a-cursor color="black"></a-cursor></a-camera>
	
	</a-scene>
	
<script>
	
$.fancybox.defaults.animationEffect = "fade";
$.fancybox.defaults.idleTime = "false";
$.fancybox.defaults.mobile = { idleTime : "false" };

</script>
			
		<script>
			
			$('#juegos').on("click", function(event) {
				event.preventDefault();
				$.fancybox.open([
					{
					  src  : 'img/juegos.jpg',
					  opts : {
						caption : 'Juegos Infantiles'					  
					  }
					}
				  ], {
					loop : true,
					hash : "",
					slideShow  : false,
					fullScreen : false,
					thumbs     : false,
					zoom		: false,
					closeBtn   : true
				  });
			});	
			
			$('#vista').on("click", function(event) {
				event.preventDefault();
				$.fancybox.open([
					{
					  src  : 'img/patio.jpg',
					  opts : {
						caption : 'Patio Interior'					  
					  }
					}
				  ], {
					loop : true,
					hash : "",
					slideShow  : false,
					fullScreen : false,
					thumbs     : false,
					zoom		: false,
					closeBtn   : true
				  });
			});	
						   
			$('#salon').on("click", function(event) {
				event.preventDefault();
				$.fancybox.open([
					{
					  src  : 'img/salon.jpg',
					  opts : {
						caption : 'Sal&oacute;n de Usos M&uacute;ltiples'					  
					  }
					}
				  ], {
					loop : true,
					hash : "",
					slideShow  : false,
					fullScreen : false,
					thumbs     : false,
					zoom		: false,
					closeBtn   : true
				  });
			});	
			
			$('#teens').on("click", function(event) {
				event.preventDefault();
				$.fancybox.open([
					{
					  src  : 'img/jovenes.jpg',
					  opts : {
						caption : 'Sal&oacute;n de J&oacute;venes'					  
					  }
					}
				  ], {
					loop : true,
					hash : "",
					slideShow  : false,
					fullScreen : false,
					thumbs     : false,
					zoom		: false,
					closeBtn   : true
				  });
			});	
						   
			$('#gym').on("click", function(event) {
				event.preventDefault();
				$.fancybox.open([
					{
					  src  : 'img/gym-1.jpg',
					  opts : {
						caption : 'Gimnasio'					  }
					},
					{
					  src  : 'img/gym-2.jpg',
					  opts : {
						caption : 'Gimnasio'
					  }
					}
				  ], {
					loop : true,
					hash : "",
					slideShow  : false,
					fullScreen : false,
					thumbs     : false,
					zoom		: false,
					closeBtn   : true
				  });
			});	
						   
			
		</script>
		
    
</body>
</html>