Hi all ^^
Have a unknown bug here !!
I'm developping my web app for iPhone and iPad and I have problems to laod more than one pano in the same html page :'(
Here's the code so you can see:
Code
<div id="edge1">
<div class="toolbar">
<h1>Tourisme & Loisirs</h1>
<a href="#" class="back">Retour</a>
</div>
<ul class="edgetoedge">
<li class="sep">Restaurants/Bar Lounge</li>
<li class="flip"><a href="#talaia">Talaia la Péniche</a></li>
<li class="flip"><a href="#opale">L'Opale</a></li>
<li class="flip"><a href="#vo">Vo-Café</a></li>
</ul>
</div>
<div id="talaia">
<div class="toolbar">
<h1>Le Talaia</h1>
<a class="back" href="#">Retour</a>
</div>
<ul class="edgetoedge">
<li class="sep">Bayonne</li>
</ul>
<div class="info">
C'est dans une ambiance cocooning, en regardant glisser l'Adour juste au niveau des hublots, que vous pourrez vous retrouver entre amis pour un apéritif, une soirée ou avant de monter au restaurant pour admirer Bayonne en regardant passer les bateaux au fil de l'eau.</div>
<div id="talaiatour" style="width:320px; height:280px;">
<script src="vtour/tour.js"></script>
<script>
var viewer = createPanoViewer({swf:"vtour/tour.swf", xml:"vtour/tour.xml", target:"talaiatour"});
if ( viewer.isHTML5possible() )
{
viewer.useHTML5("always");
viewer.embed();
}
else
{
// show error message
document.getElementById("nonhtml5infos").style.display = "inline";
}
</script>
</div>
</div>
<div id="opale">
<div class="toolbar">
<h1>L'Opale</h1>
<a class="back" href="#">Retour</a>
</div>
<ul class="edgetoedge">
<li class="sep">Biarritz</li>
</ul>
<div class="info">
Situé en plein coeur de Biarritz, face à la Grande plage, l'Opale restaurant bar lounge vous accueille toute l'année dans un décor unique sur la côte basque. Sa terrasse panoramique vous offrira l'une des plus belle vue sur l'océan et son bar lounge vous promet des instants de détente exceptionnels.</div>
<div id="opaletour" style="width:320px; height:280px;">
<script src="vtour1/tour.js"></script>
<script>
var viewer = createPanoViewer({swf:"vtour1/tour.swf", xml:"vtour1/tour.xml", target:"opaletour"});
if ( viewer.isHTML5possible() )
{
viewer.useHTML5("always");
viewer.embed();
}
else
{
// show error message
document.getElementById("nonhtml5infos").style.display = "inline";
}
</script>
</div>
</div>
<div id="vo">
<div class="toolbar">
<h1>VO-Café</h1>
<a class="back" href="#">Retour</a>
</div>
<ul class="edgetoedge">
<li class="sep">Anglet</li>
</ul>
<div class="info">
Un espace exceptionnel avec une élévation et une proximité de l'océan rare sur la côte basque. Environ 60 places assises pour profiter du soleil et de l'océan. Un bar à cocktails vous accueille tout au long de la journée. Nos équipes vous attendent pour vos déjeuners et diners!</div>
<div id="votour" style="width:320px; height:280px;">
<script src="vtour2/tour.js"></script>
<script>
var viewer = createPanoViewer({swf:"vtour2/tour.swf", xml:"vtour2/tour.xml", target:"votour"});
if ( viewer.isHTML5possible() )
{
viewer.useHTML5("always");
viewer.embed();
}
else
{
// show error message
document.getElementById("nonhtml5infos").style.display = "inline";
}
</script>
</div>
</div>
Display More
I mind if it's due to the tour.js load for the first tour.
This code makes my first <div> tour works great, but the 2 others (<div id="opaletour"> and <div id="votour">) doesn't load...
Someone has an idea maybe ?
If I get the solution I'll let you know ^^
Thanks in advance !
Regards.
PS: as you see I use width and height css attributes to force the size of the tours, is there a way to get it scale as we navigate under iPhone or iPad ?
Thanks again ^^
Bye !