Sorry about that, let me try again:
html:
<!--
plainslides.html
Supersized - Fullscreen Slideshow jQuery Plugin Version 3.0
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Website: www.buildinternet.com/project/supersized
-->
<!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" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11">
<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<!--needs for bg images (also has to be above jquery for overlay) -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--needs for bg images -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<!--SCRIPT FOR FONT COLOUR CHANGE -->
<script type="text/javascript" src="jQuery_color_animation/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery_color_animation/js/jquery.color.js"></script>
<script type="text/javascript">
<!--START SCRIPT FOR FONT COLOUR CHANGE -->
// Background color animation
$(document).ready(function(){
$(".first a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
// font color animation
$(".second a").hover(function() {
$(this).animate({ color: "#FFDA6B" }, 100);
},function() {
$(this).animate({ color: "#CCC" }, 500);
});
});
<!--END SCRIPT FOR FONT COLOUR CHANGE -->
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="supersized3/js/effects.core.js"></script>
<script src="supersized3/js/effects.slide.js"></script>
<script type="text/javascript" src="supersized3/supersized.3.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 377,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 500,
slides : [
{image : 'supersized3/slides/1.jpg'},
{image : 'supersized3/slides/2.jpg'},
{image : 'supersized3/slides/3.jpg'},
]
};
$('#supersized').supersized();
});
</script>
<!--STYLE FOR BG IMAGES TO WORK -->
<style type="text/css">
#content{ background-color:rgba(0,0,0,0.65); width:720px; height:800px; margin:30px auto; text-align:left; }
</style>
<!--STYLE FOR BG IMAGES TO WORK -->
<style type="text/css">
<!--
#the_effect {
float:right;
display:none;
margin-left:100px;
width:80%;
height: 100%;
}
#the_effect2 {
float:right;
display:none;
margin-left:100px;
width:80%;
height: 100%;
}
.links {
text-align:left;
float:left;
position: absolute;
}
.clearfloat {
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<!--Loading display while images load-->
<div id="loading"> </div>
<!--Content Area-->
<div id="content-wrapper">
<!-- container required to validate strict for clearfloat linebreak at end of container -->
<div>
<div id="the_effect">
<IFRAME width="100%" height="100%" frameborder="0" src="pages/main-pages.html"></IFRAME>
</div>
<div id="the_effect2">
<IFRAME width="100%" height="100%" frameborder="0" src="pages/main-pages.html"></IFRAME>
</div>
<div id="list" class="second">
<div class="links">
<h2>
<a href="#" id="effect_link">mystery jets (music video)</a><br />
<a href="#" id="effect_link2">fenech soler</a><br />
<p>- - - - -</p>
<a href="#" id="two" >seaweed</a><br />
<a href="#" id="two" >pixel fun</a><br />
<a href="#" id="two" >making a shell</a><br />
<p>- - - - -</p>
<a href="#" id="two" >tide </a><br />
<a href="#" id="two" >eyelids </a><br />
</h2>
<p>- - - - -</p>
<a href="#" id="two" >press and exhibitions </a><br />
<p>- - - - -</p>
<a href="#" id="two" > <h1>about</h1></a>
<P><a href="mailto:luke@blackpaint.co.uk">luke@blackpaint.co.uk</a></p>
</div>
</div>
<br class="clearfloat" />
</div>
<!-- end container -->
<script type="text/javascript">
<!--
$("#effect_link").click(function() {
$("#the_effect2").hide("fast");
$("#the_effect").toggle("fast");
return false;
});
-->
<!--
$("#effect_link2").click(function(slide) {
$("#the_effect").hide("fast");
$("#the_effect2").toggle("fast");
return false;
});
-->
</script>
</div>
<!--Slides-->
<div id="supersized"></div>
</body>
</html>
/*
Supersized - Fullscreen Slideshow jQuery Plugin Stylesheet Version 3.0
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Version: supersized.3.0.js
Website: www.buildinternet.com/project/supersized
*/
*{
margin:0;
padding:0;
}
a{
color:#CCC;
text-decoration: none;
outline: none;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
/*Area to place content normally*/
#content-wrapper{
width:100%;
height:100%;
position:absolute;
top:0;
overflow:auto;
z-index:4;
text-align:center;
}
/*Supersize Plugin Styles*/
#navigation{
float: right;
margin:10px 20px 0 0;
}
#loading {
position: absolute;
top: 49.5%;
left: 40%;
z-index: 10;
width: 217px;
height: 25px;
text-indent: -999em;
background-image: url(../supersized3/images/progress1.gif);
}
#supersized{
position:fixed;
}
#supersized img{ -ms-interpolation-mode: bicubic; }
#supersized img, #supersized a{
height:100%;
width:100%;
position:absolute;
z-index: -1;
}
#supersized .prevslide, #supersized .prevslide img{
z-index: 1;
}
#supersized .activeslide, #supersized .activeslide img{
z-index: 2;
}
#nextthumb, #prevthumb{ z-index:6; display:none; position:absolute; bottom:12px; height:75px; width:100px; overflow:hidden; border:2px solid #fff; -webkit-box-shadow: 0px 0px 5px #000; }
#nextthumb{ right:12px; }
#prevthumb{ left:12px; }
#nextthumb img, #prevthumb img{ width:150px; }
#nextthumb:active, #prevthumb:active{ bottom:10px; }
/*Add hover pointer*/
#controls > *:hover, #nextthumb:hover, #prevthumb:hover{ cursor:pointer; }
/*Font Colour change*/
.second a {
font-style:normal !important;
padding: 5px;
}
body {
background-color:#FFF;
}
/*Font Colour change*/
#list {
padding: 20px;
}
h1 {
font-size:18px;
font-weight:bold;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999;
}
h2 {
font-size:11px;
font-weight:lighter;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999;
}
p {
font-size:11px;
font-weight:lighter;
font-family: Georgia, "Times New Roman", Times, serif;
color: #999;
}
.externalcontent {
color: #666;
padding: 20px;
}
#mediaholder {
padding-left: 20px;
}