Hello to everyone. I am new to this so if I post something I shouldn't please forgive me.

I am having a problem and would like some help.

I have a webpage that has a main image and 5 thumbnails. When someone clicks on the thumbnails the main image changes to reflect a larger version of the thumbnail. When the user clicks the main image it opens in a lightbox.

My issue is that if the user clicks the 2nd thumbnail the main image changes correctly. If the user then clicks the main image it will always open the lightbox containing the first image. I would like it to open the lightbox with the correct image and then have the prev/next buttons to cycle to the next and previous when clicked.

I hope this makes sense?

Here is my code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Replacement</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />


<script type="text/javascript">
$(document).ready(function(){

$("h2").append('<em></em>')

$(".thumbs a").click(function(){

var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });

$("h2 em").html(" (" + largeAlt + ")"); return false;
});

});
</script>

<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>

<script type="text/javascript">
$(function() {
$('#galleryx a').lightBox();
});
</script>

<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 640px;
height: 303px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}

/* jQuery lightBox plugin - Gallery style */
#gallery {
width: 652px;
}
#galleryx {
width: 652px;
}
</style>
</head>

<body>

<h2>Illustrations</h2>
<div id="gallery">
<p><a href="photos/gallery-boulevard-img1.jpg" rel="lightbox" title="image1"><img id="largeImg" src="photos/gallery-boulevard-img1.jpg" alt="Large image" /></a>
<a href="photos/gallery-boulevard-img10.jpg" rel="lightbox" title="Image 2"><img id="largeImg" src="photos/gallery-boulevard-img10.jpg" alt="Large image" style="display:none;" /></a>
<a href="photos/gallery-boulevard-img11.jpg" rel="lightbox" title="Image 4"><img id="largeImg" src="photos/gallery-boulevard-img11.jpg" alt="Large image" style="display:none;" /></a>
<a href="photos/gallery-boulevard-img12.jpg" rel="lightbox" title="Image 5" ><img src="photos/gallery-boulevard-img12-thm.jpg" style="display:none;" /></a>
<a href="photos/gallery-boulevard-img13.jpg" title="Image 6" rel="lightbox"><img src="photos/gallery-boulevard-img13-thm.jpg" style="display:none;" /></a></p>
</div>
<p class="thumbs">
<a href="photos/gallery-boulevard-img1.jpg" title="Image 2"><img src="photos/gallery-boulevard-img1-thm.jpg" /></a>
<a href="photos/gallery-boulevard-img10.jpg" title="Image 3"><img src="photos/gallery-boulevard-img10-thm.jpg" /></a>
<a href="photos/gallery-boulevard-img11.jpg" title="Image 4"><img src="photos/gallery-boulevard-img11-thm.jpg" /></a>
<a href="photos/gallery-boulevard-img12.jpg" title="Image 5"><img src="photos/gallery-boulevard-img12-thm.jpg" /></a>
<a href="photos/gallery-boulevard-img13.jpg" title="Image 6"><img src="photos/gallery-boulevard-img13-thm.jpg" /></a>
</p>
<p >&nbsp;</p>
<p>&nbsp;</p>
<div id="galleryx">
<p><a href="photos/gallery-boulevard-img1.jpg" title="image1" rel="lightbox[gallery]"><img id="largeImg" src="photos/gallery-boulevard-img1.jpg" alt="Large image" /></a>
<a href="photos/gallery-boulevard-img10.jpg" title="Image 2" rel="lightbox[gallery]"><img id="largeImg" src="photos/gallery-boulevard-img10.jpg" alt="Large image" style="display:none;" /></a>
<a href="photos/gallery-boulevard-img11.jpg" title="Image 4" rel="lightbox[gallery]"><img id="largeImg" src="photos/gallery-boulevard-img11.jpg" alt="Large image" style="display:none;" /></a></p>
</div>
</body>
</html>