display images with jquery

Hi there,
I think I got myself in the muddle trying to display some pix with jquery. Here the problem.
What I want to do on my site [url]http://antobbo.webspace.virginmedia.com/photogallery/water.htm[/url] is to click on the thumb (say the first thumbnail) and display a bigger sized image in an overlaid box, something like this [url]http://fancybox.net/[/url].
The thing is that I would like to do it myself rather than using a plug in, but, being pretty new to jquery I am getting a bit lost.
here’s what I have done.
HTML:

[code=html]…
<div class=”thumbnail”>
<a href=”#” class=”full_image”><img src=”images/water_thumb_1.jpg” alt=”” style=”border:0″ onClick=”change_image(‘big_image_1’)”></a>
<img src=”images/water_full_1.jpg” alt=”” style=”display:none” id=”big_image_1″>
</div><!– END OF thumbnail 1–>

<div class=”thumbnail”>
<a href=”#” class=”full_image”><img src=”images/water_thumb_2.jpg” alt=”” style=”border:0″ onClick=”change_image(‘big_image_2’)”></a>
<img src=”images/water_full_3.jpg” alt=”” style=”display:none” id=”big_image_2″>
</div><!– END OF thumbnail 2–>
…[/code]

So if we take the first “thumbnail” div, I have my thumbnail picture “images/water_thumb_1.jpg” which when clicked on will pass the id of the full picture “images/water_full_1.jpg”, which is currently hidden,
to the javascript function “change_image” and jquery script:

[CODE]<script type=”text/javascript”>

function change_image(image)
{

$(function() {

$(“.overlay”).show();
$(“.box”).show(“slow”);
$(image).fadeIn(4000);
$(“.close_button”).show();

$(“.close_button”).click(function() {
$(this).hide();
$(“standalone_image”).fadeOut(“fast”);
$(“.box”).hide(“slow”);
$(“.overlay”).hide(“slow”);
});

});
}
</script> [/CODE]

The picture passed as a variable will be then used to display the big picture
The script is meant to be firing up few boxes (an overlay, a box where the big picture will be displayed in and a close button).
Here’s the css for the various boxes:

[CODE]…
/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
display:none;
background:#cf1dbb;
opacity:0.85;
filter:alpha(opacity=85); /* For IE8 and earlier */
top:0px;
bottom:0px;
left:0px;
right:0px;
position:fixed;
z-index:100;
}

.box
{
display:none;
background-color:black;
width:660px;
height:450px;
position:absolute;
right:30%;
left:30%;
top:10%;
z-index:101;
}

.standalone_image
{
display:none;
/*background:url(../images/water_full_3.jpg) no-repeat;*/
position:absolute;
z-index:101;
width:602px;
height:399px;
top:25.5px;
bottom:25.5px
left:29px;
right:29px;
/*border:1px solid red;*/

}

.close_button
{
display:none;
left:94%;
background:url(../images/close_button.png);
width:40px;
height:40px;
position:absolute;
z-index:102;
}
… [/CODE]

Sorry sure I have made stupid mistakes but I am still at the beginning, could anybody suggest anything?
thanks a lot

Also in #JavaScript _↴