Hi, All

I am a web developer developing my first html site.I have run into problems with jquery gallery called Gallerific.I have followed instructions on where to insert the tags but still cannot get it to work properly..

The code is as follows...

HTML Code:
<!-- Created by ysbnet.in business card tool, http://hostedapps.ysbnet.in/businesscard -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Welcome to INARCH9</title>
<link type="text/css" href="../css/styles.css" rel="stylesheet"/>
<link rel="stylesheet" href="../css/basic.css" type="text/css" />
		<link rel="stylesheet" href="../css/galleriffic-2.css" type="text/css" />
		<script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="../scripts/jquery.galleriffic.js"></script>
		<script type="text/javascript" src="../scripts/jquery.opacityrollover.js"></script>
<!--h1{margin-bottom:0px;font-size:30px;} -->
<!--This puts border under h1(border-bottom:1px solid black;)) -->
<!--This code (padding:0;margin:0;clear:both;) puts space between between Top menu and h1 -->
</head>
<body>
<div id="wrapper">
<h1><a id="shortcut" href="index.html">INARCH9</a></h1>
<!-- Top Menu starts -->
<nav>
<ul>
 <li><a href="index.html" alt="Page Not Found" >Home</a></li>
    <li><a href="Projects.html" alt="Page Not Found">Projects</a></li>
    <li><a href="Gallery.html" alt="Page Not Found" class="current">Gallery</a></li>
    <li><a href="About.html" alt="Page Not Found">About Us</a></li>
    <li><a href="Contact.html" alt="Page Not Found">Contact Us</a></li>
    </ul>
 </nav>
<img src="http://ysbnet.in/hostedapps/header/real_estate.png" alt="Not Available"/>
<!--Content starts here -->
<div id="page">
			<div id="container">
				<h1><a href="index.html">Galleriffic</a></h1>
				<h2>Thumbnail rollover effects and slideshow crossfades</h2>

				<!-- Start Advanced Gallery Html Containers -->
				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
</div>

<div id="footer">Copyright &copy; 2012 INARCH9. All rights reserved.</div>
</div>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});
		</script>

</body>
</html>
This is my css...
Code:
@charset "utf-8";


/*---------------------------------------------------------------------------------------------*/

/*index.html starts*/
nav{
	background:#151B54;
	height:2.3em;
}
ul,li {
	
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	
}

ul{
	background:#151B8D;
	height:2em;
	width:100%;
}
li a{
	display:inline-block;
	line-height:2em;
	padding:0 3.16em;
	font:Arial;
	color:white;
	text-decoration:none;
}

li a:hover{
	background:#151B54;
	height:2em;
	padding-left:3.16em;
	padding-right:3.16em;
	padding-top:.3em;
	position:relative;
	top:-.3em;
	border-radius:.3em .3em 0 0;
	
	
}
.current,a:hover.current{
	background:#6D7B8D;
	color:#eee;
	padding-top:.3em;
	padding-left:3.173em;
	padding-right:3.173em;
	position:relative;
	top:-.3em;
	border-radius:.3em .3em 0 0;
	border-bottom:.3em solid #806D7E;
}
img{
	font-size:8px;
    display: block;
	margin-left:auto;
	margin-right:auto;
	max-width:800px;
}	
a{text-decoration:none;}

.fluid_container {
			margin: 0 auto;
			max-width: 1000px;
			width: 90%;
}

/*index.html ends*/

/*gallery.html starts*/
body {color:#000080;font:normal 16px Georgia,Verdana,Arial,san-serif;background-image:url(../images/bgimage.jpg); 
		background-color:white;}
#wrapper{width:800px;text-align:center; border:0px;padding:0;margin: 0 auto;}
h1{font-weight:bold;font-size:30px;margin-bottom:0px;padding:0;margin:0;clear:both;}
h2{margin-top:0px;}
img{font-size:8px;width:796px;margin-bottom:0px;padding:0;margin:0;clear:both;}
/*img{font-size:8px;width:796px;margin-bottom:0px;padding:0;margin:0;clear:both;align:center;}*/
#footer {position: relative;
	border-top:1px solid black;
	text-align:center;
	margin-top: 330px; /* negative value of footer height */
	height: -330px;
	clear:both;} 
a{text-decoration:none;}
h2{border-bottom:1px solid black;}
#shortcut:visited{color:#000080;}
/*gallery.html ends*/


/*contact.html addition styles*/

#name h3{margin-top:0px;}
h3{font-weight:bold;}
a.text{color:#000080;}
h3, p.text, p.firstLine{
    display: inline;
    vertical-align: top;
    line-height: 28px;
}
p.secondLine{margin-left:91px;margin-top:0px;margin-bottom:2px}
p.thirdLine{margin-left:91px;margin-top:0px;margin-bottom:0px}


#images{
width: 960px;
height: auto;
overflow: hidden;
}
#images img {
display: inline;
margin: 0 10px