Hey,
Im stuck because i am using multiple versions of Javascript, so only the coverflow is working. Please can someone help?
Heres my code
<!DOCTYPE html>
<html>
<head>
<title>Sir Harry Smith's School Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/scripts/jquery-1.2.62.min.js"></script>
<script type="text/javascript" src="includes/scripts/jquery-ui-personalized-1.5.22.packed.js"></script>
<script type="text/javascript" src="includes/scripts/sprinkle.js"></script>
<style type="text/css">
#tabvanilla p2 p {
text-align: left;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<img src="includes/images/logo.png" alt="Insert Logo Here" name="logo" width="1100" height="280" id="logo" style="background: #8090AB; display:block;" />
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About Us</a></li>
</ul>
<div id="home" class="tabdiv">
<p><a href="index.html"> Home </a></p>
</div>
<div id="news" class="tabdiv">
<p>
<a href="reports/video.html">Main Headlines</a></p><!--/recent-->
<p><a href="reports/report1.html">Belgian Bus Crash Catastrophe</a></p>
<p><a href="reports/report2.html">100 years over – Coincidence or Fate?</a> </p>
<p><a href="reports/report3.html">Can you tap yourself thin?</a></p>
<p><a href="reports/report4.html">What defines our generation?</a></p>
<p><a href="reports/report5.html">Barack O-Cameron</a></p>
</div>
<div id="about" class="tabdiv">
<p><a href="#">The Reporters</a></p>
</div>
<p2><!--featured-->
<!--/widget-->
<div id="container2">
<script src="mootools - Copy.js" type="text/javascript"></script>
<script src="animate - Copy.js" type="text/javascript"></script>
<div id="wrapper">
<div id="back">
<div id="upperPartBack">
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img id="dateUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="dateUpRightBack" src="images/Double/Up/Right/0.png" />
<img id="monthUpBack" src="images/months/single/up/0.png" />
<img id="yearBack1" src="images/months/single/20up.png" />
<img id="yearBack2" src="images/months/single/12up.png" />
<img id="hoursUpBack" src="images/Single/Up/AM/0.png" />
<img id="minutesUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="minutesUpRightBack" src="images/Double/Up/Right/0.png" />
<img id="secondsUpLeftBack" src="images/Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="images/Double/Up/Right/0.png" />
</div>
<div id="lowerPartBack">
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img id="dateDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="dateDownRightBack" src="images/Double/Down/Right/0.png" />
<img id="monthDownBack" src="images/months/single/down/0.png" />
<img id="yearBackdown1" src="images/months/single/20down.png" />
<img id="yearBackdown2" src="images/months/single/12down.png" />
<img id="hoursDownBack" src="images/Single/Down/AM/0.png" />
<img id="minutesDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="images/Double/Down/Right/0.png" />
<img id="secondsDownLeftBack" src="images/Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="images/Double/Down/Right/0.png" />
</div>
</div>
<div id="front">
<div id="upperPart">
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img id="dateUpLeft" src="images/Double/Up/Left/0.png" /><img id="dateUpRight" src="images/Double/Up/Right/0.png"/>
<img id="monthUp" src="images/months/single/up/0.png" />
<img id="yearUp1" src="images/months/single/20up.png" />
<img id="yearUp2" src="images/months/single/12up.png" />
<img id="hoursUp" src="images/Single/Up/AM/0.png" />
<img id="minutesUpLeft" src="images/Double/Up/Left/0.png" /><img id="minutesUpRight" src="images/Double/Up/Right/0.png"/>
<img id="secondsUpLeft" src="images/Double/Up/Left/0.png" /><img id="secondsUpRight" src="images/Double/Up/Right/0.png"/>
</div>
<div id="lowerPart">
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img src="images/spacer.png" />
<img id="dateDownLeft" src="images/Double/Down/Left/0.png"/><img id="dateDownRight" src="images/Double/Down/Right/0.png" />
<img id="monthDown" src="images/months/single/down/0.png" />
<img id="yearUpleft1" src="images/months/single/20down.png" />
<img id="yearUpleft2" src="images/months/single/12down.png" />
<img id="hoursDown" src="images/Single/Down/AM/0.png"/>
<img id="minutesDownLeft" src="images/Double/Down/Left/0.png"/><img id="minutesDownRight" src="images/Double/Down/Right/0.png" />
<img id="secondsDownLeft" src="images/Double/Down/Left/0.png" /><img id="secondsDownRight" src="images/Double/Down/Right/0.png" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<!-- Include jQuery CoverFlow widget -->
<script type="text/javascript" src="js/ui.coverflow.js"></script>
<link type="text/css" href="css/demos.css" rel="stylesheet" />
<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
<script src="js/sylvester.js" type="text/javascript"></script>
<script src="js/transformie.js" type="text/javascript"></script>
<!-- Include mousewheel dependancies and app files -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<link type="text/css" href="css/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript">
$(function(){
var demo = {
yScroll: function(wrapper, scrollable) {
var wrapper = $(wrapper), scrollable = $(scrollable),
loading = $('<div class="loading">Loading...</div>').appendTo(wrapper),
internal = null,
images = null;
scrollable.hide();
images = scrollable.find('img');
completed = 0;
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
setTimeout(function(){
loading.hide();
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 0);
}
function enable(){
var inactiveMargin = 99,
wrapperWidth = wrapper.width(),
wrapperHeight = wrapper.height(),
scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin,
wrapperOffset = 0,
top = 0,
lastTarget = null;
wrapper.mousemove(function(e){
lastTarget = e.target;
wrapperOffset = wrapper.offset();
top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
}
}
}
demo.yScroll('#scroll-pane', 'ul#sortable');
});
</script>
<div class="pageWrapper">
<div class="demo">
<div class="wrapper">
<div id="coverflow"> <a href="aaa"><img src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach" /></a>
<img src="img/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
<img src="img/kidrock-bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>
<img src="img/recovery-recovery.jpg" data-artist="Eminem" data-album="Recovery"/>
<img src="img/lilwayne-iamnotahumanbeing.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/>
<img src="img/taylorswift-speaknow.jpg" data-artist="Taylor Swift" data-album="Speak Now"/>
<img src="img/thebandperry-thebandperry.jpg" data-artist="The Band Perry" data-album="The Band Perry"/>
<img src="img/maroon5-handsallover.jpg" data-artist="Maroon 5" data-album="Hands All Over"/>
<img src="img/mychemicalromance-dangerdays.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/>
<img src="img/ironmaiden-thefinalfrontier.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/>
<img src="img/order of the black - black label society.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/>
<img src="img/usher-raymondvraymond.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>
</div>
</div>
</body>
</html>