Hello,
I am trying to incorporate virtual tour in squarespace. All the files for the tour are on a different server. I have read some of the threads but I didn't manage to make this work.
In square space i use this code:
Code
<script src="https://.../.../tour.js"> </script>
<div style="width: 100%; padding-top: 56.25%; position: relative;"> <div id="pano" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></div></div>
<script> embedpano({swf:"https://.../.../tour.swf", xml:"https://.../....tourxd.xml", target:"pano"});</script>On the server with the krpano i use these files:
index.html:
HTML
<!DOCTYPE html><html><head> <title>krpano - pano</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="IE=edge" /> <style> @-ms-viewport { width:device-width; } @media only screen and (min-device-width:800px) { html { overflow:hidden; } } html { height:100%; } body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; } </style></head><body><script src="https://.../.../tour.js"></script>
<div id="pano" style="width:100%;height:100%;"> <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript> <script> embedpano({swf:"https://.../.../tour.swf", xml:"https://.../.../tourxd.xml", target:"pano", flash: "only", mobilescale:1.0, passQueryParameters:true}); </script></div>
</body></html>tour.xml
Code
<krpano version="1.19" title="Virtual Tour">
<include url="https://.../.../skin/vtourskin.xml" /> <security> <crossdomainxml url="https://.../.../crossdomain.xml" /> </security>
<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... --> <skin_settings maps="false" maps_type="google" maps_bing_api_key="" maps_google_api_key="" maps_zoombuttons="false" gyro="true" webvr="true" webvr_gyro_keeplookingdirection="false" webvr_prev_next_hotspots="true" littleplanetintro="false" title="true" thumbs="true" thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160" thumbs_opened="false" thumbs_text="false" thumbs_dragging="true" thumbs_onhoverscrolling="false" thumbs_scrollbuttons="false" thumbs_scrollindicator="false" thumbs_loop="false" tooltips_buttons="false" tooltips_thumbs="false" tooltips_hotspots="false" tooltips_mapspots="false" deeplinking="false" loadscene_flags="MERGE" loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)" loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)" loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)" loadingtext="loading..." layout_width="100%" layout_maxwidth="814" controlbar_width="-24" controlbar_height="40" controlbar_offset="20" controlbar_offset_closed="-40" controlbar_overlap.no-fractionalscaling="10" controlbar_overlap.fractionalscaling="0" design_skin_images="vtourskin.png" design_bgcolor="0x2D3E50" design_bgalpha="0.8" design_bgborder="0" design_bgroundedge="1" design_bgshadow="0 4 10 0x000000 0.3" design_thumbborder_bgborder="3 0xFFFFFF 1.0" design_thumbborder_padding="2" design_thumbborder_bgroundedge="0" design_text_css="color:#FFFFFF; font-family:Arial;" design_text_shadow="1" />
<!-- For an alternative skin design either change the <skin_settings> values from above or optionally include one of the predefined designs from below. --> <!-- <include url="skin/vtourskin_design_flat_light.xml" /> --> <!-- <include url="skin/vtourskin_design_glass.xml" /> --> <include url="https://.../.../.../vtourskin_design_ultra_light.xml" /> <!-- <include url="skin/vtourskin_design_117.xml" /> --> <!-- <include url="skin/vtourskin_design_117round.xml" /> --> <!-- <include url="skin/vtourskin_design_black.xml" /> -->
<!-- startup action - load the first scene --> <action name="startup" autorun="onstart"> if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); ); loadscene(get(startscene), null, MERGE); if(startactions !== null, startactions() ); </action>
<!-- VIEW 01 -->
<scene name="v01" title="v01" onstart="" havevrimage="true" thumburl="https://.../.../.../.../pano.tiles/thumb.jpg" lat="" lng="" heading="">
<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="100" maxpixelzoom="2.0" fovmin="90" fovmax="110" limitview="auto" />
<preview url="https://.../.../.../.../pano.tiles/preview.jpg" />
<image type="CUBE" multires="true" tilesize="512" if="!webvr.isenabled"> <level tiledimagewidth="2176" tiledimageheight="2176"> <cube url="https://.../.../.../.../pano.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" /> </level> <level tiledimagewidth="1024" tiledimageheight="1024"> <cube url="https://.../.../.../.../pano.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" /> </level> </image>
<image type="CUBE" stereo="true" sterelabels="1|2" if="webvr.isenabled"> <cube url="https://.../.../.../.../pano.tiles/vr_%t/pano_%s.jpg" /> </image>
<!-- place your scene hotspots here --> <hotspot name="spot1" style="skin_hotspotstyle" ath="27.313" atv="-3.031" linkedscene="v02" />
</scene>
</krpano>And finaly here is the crossdomain.xml
XML
<?xml version="1.0"?><cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd"><allow-access-from domain="*"/></cross-domain-policy>I get this error: tour.xml - loading failed. Not sure if it is possible to make it work this way. Unfortunately I can't upload the panos directly in squarespace. Dou you guys have any suggestions?
Thanks in advance,
Alex