FREDHQ roundabout problem
We used this in class
http://fredhq.com/projects/roundabout/ and I'd like to put it on a webpage but for some reason the tilt and controls in the .js file are not working.
index file
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Kaiusagi Rabbitry</title>
<head>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
</head>
<body>
<div id="page-background"><img src="full.jpg" width="100%" height="100%"></div>
<div id="content" width="726">
<center><a href="home.html"><img src="kaiusagi3.jpg"/></a></center>
<br>
<br>
<div id="page">
<div id="fruitbox">
<div class="fruitmenu">
<ul class="fruit" id="fruit">
<li><a href="bananas.html"><img width="210" height="210" src="images/bananas.png"/></a></li>
<li><a href="bloodoranges.html"><img width="210" height="210" src="images/bloodoranges.png"/></a></li>
<li><a href="darkredapples.html"><img width="210" height="210" src="images/darkredapples.png"/></a></li>
<li><a href="greenapples.html"><img width="210" height="210" src="images/greenapples.png"/></a></li>
<li><a href="kiwis.html"><img width="210" height="210" src="images/kiwis.png"/></a></li>
</ul>
</div> <!--end of fruitmenu -->
<script>document.write('<a class="prev">< Prev</a>');
document.write('<a class="next">Next ></a>');
</script>
<div class="fruitlabel" id='fruitlabel'>
<h2 class="fruitcaption0"><a href="bananas.html">bananas</a></h2>
<h2 class="fruitcaption1"><a href="bloodoranges.html">blood oranges</a></h2>
<h2 class="fruitcaption2"><a href="darkredapples.html">dark red apples</a></h2>
<h2 class="fruitcaption3"><a href="greenapples.html">green apples</a></h2>
<h2 class="fruitcaption4"><a href="kiwis.html">kiwi</a></h2>
<p class="fruittext0">Have a banana.</p>
<p class="fruittext1">Have a blood orange.</p>
<p class="fruittext2">Have a red apple.</p>
<p class="fruittext3">Have a green apple.</p>
<p class="fruittext4">Have a kiwi.</p>
</div><!-- end of fruitlabel -->
</div> <!--end of fruitbox -->
<noscript><div class="fruitnoscript">
<table style= "text-align: center"; "border="1">
<tr>
<td><a href="bananas.html"><img width="210" height="210" src="images/bananas.png" alt="bananas"/></a></br><h2><a href="bananas.html">bananas</a></h2><p> Have a banana.</p></td>
<td><a href="bloodoranges.html"><img width="210" height="210" src="images/bloodoranges.png" alt="blood oranges"/><br><h2 <a href="bloodoranges.html">blood oranges</a></h2> <p>Have a blood orange.</p></a></td>
<td><a href="darkredapples.html"><img width="210" height="210" src="images/darkredapples.png" alt="red appple"/></a></br><<h2> <a href="darkredapples.html">dark red apples</a></h2> <p>Have a red apple.</p> </td>
<td><a href="greenapples.html"><img width="210" height="210" src="images/greenapples.png" alt="green apple"/></a></br><h2> <a href="greenapples.html">green apples</a></h2><p>Have a green apple.</p> </td>
</tr>
<tr>
<td><a href="kiwis.html"><img width="210" height="210" src="images/kiwis.png" alt="kiwis"/></a></br><h2><a href="kiwis.html">kiwi</a></h2><p>Have a kiwi.</p></td>
<</tr>
</table>
</div></noscript>
<center>page content here</center>
<p>This is place holder text. This is place holder text. This is place holder text. This is place holder text. This is place holder text. This is place holder text. This is place holder text. This is place holder text.</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
document.getElementById('fruitlabel').style.display = "block";
$('#fruitbox li').css('padding-top','100px');
$('#fruitbox .fruitmenu').css('display', 'block');
</script>
<script src="js/jquery.roundabout.min.js"></script>
<script src="js/fruitmenu.js"></script>
.js file
- $(document).ready(function(){
buildMyRoundabout();
$('#fruitbox p, h2').hide();
$('.fruitcaption0, .fruittext0').show();
});
function buildMyRoundabout(){
$('ul.fruit').roundabout({
childSelector: 'li',
tilt: -7,
minOpacity: 0.2,
minScale: 1.0,
maxScale: 1.0,
clickToFocus: true,
clickToFocusCallback: showlabel,
btnNext: '#fruitbox a.next',
btnNextCallback: showlabel,
btnPrev: '#fruitbox a.prev',
btnPrevCallback: showlabel
});
}
function showlabel () {
var currentfruit = $(this).data('roundabout').childInFocus;
var currentcaption = '.fruitcaption' + currentfruit;
var currenttext = '.fruittext' + currentfruit;
$('#fruitbox p, h2').hide();
$(currentcaption).show();
$(currenttext).show();
}