if this is 'hidden'

[BigAl75]

I'm using JavaScript and jQuery to display hidden images on my page. When you click on the thumbnail, the image appears at the top of the page. To close the image, you need to click on the thumbnail again. My problem is, depending on how far down the visitor has scrolled on the page, the full size image sometimes covers the thumbnail. If a visitor can't figure out how to scroll the page to get to the thumbnail again, they won't be able to close the full size image without refreshing the page. Can someone help me figure out a way make the full size image close when it's clicked on? Or even a way to add a close link on it? I've tried stuff like lightbox and so on, but can't get them to work for one reason or another.Thanks, and here's my code.java script:

<script type="text/javascript">		google.load("jquery", "1.2.6");</script><script type="text/javascript">		  google.load("jquery", "1.4.0");		  google.setOnLoadCallback(function() {			$("div > div.thumbnail").click(function() {			  if($(this).next().is(':hidden')) {				$(this).next().fadeIn("slow");			  } else {				$(this).next().fadeOut("slow");			  }			});		  }); 	</script>

CSS:

div.imagehide {	margin: 0;}div.imagehide div.thumbnail {	 	padding: 5px;		cursor: hand;   	cursor: pointer;	width: 150px;	float: left;	margin: 0 10px;}div.imagehide div.fullsize {	display: none;	width: inherit;	clear: both;	padding: 10px;	border: 1px solid black;	background-color: white;	float: left;	text-align: center;	position: fixed;	top: 10px;	left: 25%;}

HTML

<div id="1" class="imagehide">	<div class="thumbnail"><a><img src="images/cbpt/figure-1_th.jpg" alt="Figure 1" border="0" height="116" width="150"></a></div>	<div class="fullsize"><img src="images/cbpt/figure-1.jpg" width="600" height="466" alt="figure 1" /></div></div>						<div id="2" class="imagehide">	<div class="thumbnail"><a><img src="images/cbpt/figure-2_th.jpg" alt="Figure 2" border="0" height="108" width="150"></a></div>	<div class="fullsize"><img src="images/cbpt/figure-2.jpg" width="600" height="433" alt="figure 2" /></div></div>

[BigAl75]

Did some more digging and found this:

<script type="text/javascript">		  google.load("jquery", "1.4.0");		  google.setOnLoadCallback(function() {			$("div > div.thumbnail").click(function() {			  if($(this).next().is(':hidden')) {				$(this).next().fadeIn("slow");			  } else {				$(this).next().fadeOut("slow");			  }			});			$("div > div.fullsize").click(function(){			  $(this).fadeOut("slow");			});		  }); 	</script>

Works wonderfully. Hope this helps someone else.