display images with jquery

[dupalo]

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 [antobbo.webspace.virginmedia.com ] is to click on the thumb (say the first thumbnail) and display a bigger sized image in an overlaid box, something like this [fancybox.net ].
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:

...
 <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-->
...

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:

<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>

This code is meant to be fire up few boxes (an overlay, a box where the big picture will be displayed in and a close button).The function call passes the big image as a parameter and that will be used in the jquery to display the big picture...well, in theory at least!
Here's the css for that:

...
/* 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;
}
...

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

[enigma1]

I briefly checked the site. First you either need to setup the change_image function in document ready or at the end of the html just before the body. If you wanted to extend the change_image then you would use something like:

(function($){
var change_image = function(image) {
..
})(jQuery);

If you wanted to just the use a lightbox (eg: fancybox) in the header of the html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="javascript/fancybox/jquery.fancybox.css" media="screen" />

and then at the end of the html before the closing body tag

<div><script language="javascript" type="text/javascript">
$('div.thumbnail a').fancybox({
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
</script></div>

and you need to customize the plugin, setup the right path for the fancybox folder

[dupalo]

Hi there,
thanks for that. I think I have resolved it by doing this:

<script type="text/javascript">

function change_image(image)
{
$(".overlay").show();
$(".box").show("slow");
$("#" + image).fadeIn(1000);
$(".close_button").show();


$(".close_button").click(function() {
$(this).hide();
$("#" + image).fadeOut("fast");
$(".box").hide("slow");
$(".overlay").hide("slow");
});
}


</script>

I had a bit of help but it seems to be working ok : - )
thanks