Hello,
I'm trying to create a list view interface for an iPhone's display of panoramas using jQtouch. I can get a single panorama to load and everything works, but when I try to add a second panorama (scene-003), that new panorama won't load. I don't get any errors, just a blank screen when trying to view the second ("scene-001" still works as does display of text in the div "info-004").
I suspect newbie abuse of how div ids are used. I've tried making the id and targets unique and then I tried different. Neither works. The individual xml and panoramas run fine outside of the interface. Any suggestions?
Thanks,
Loren
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>iPhone Interface Test 002</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
<script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script src="jqtouch/extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'images/jqtouch.png',
addGlossToIcon: false,
startupScreen: 'images/jqt_startup.png',
statusBar: 'black'
});
</script>
<script src="tour.js"></script>
</head>
<body>
<div id="Home">
<div class="toolbar">
<h1>Gallery 1</h1>
</div>
<ul class="edgetoedge">
<li><a href="#scene-002">scene-002 title</a></li>
<li><a href="#scene-003">scene-003 title</a></li>
<li><a href="#scene-004">scene-004 title</a></li>
</ul>
</div>
<div id="scene-002" style="width:100%; height:100%;">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>[ ]</h1>
</div>
<div id="info-002" style="width:100%; height:100%;">
<script>
var viewer = createPanoViewer({swf:"tour.swf", xml:"003.xml", target:"info-002"});
viewer.embed();
</script>
</div>
</div>
<div id="scene-003" style="width:100%; height:100%;">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>[ ]</h1>
</div>
<div id="info-003" style="width:100%; height:100%;">
<script>
var viewer = createPanoViewer({swf:"tour.swf", xml:"003.xml", target:"info-003"});
viewer.embed();
</script>
</div>
</div>
<div id="scene-004" style="width:100%; height:100%;">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>[ ]</h1>
</div>
<div id="info-004">
scene-004 goes here
</div>
</div>
</body>
</html>