Hi there, I wonder if you can help me at all.
I am having problems with my website and I am a bit stuck and not too sure how to go about it.
here's what happened. This is the first version of the site http://antobbo.webspace.virginmedia....h_republic.htm and works ok.
If you click on any thumbnail the right picture with the right description come up. So all cool. The problem here is the script that can't handle all the imags.
Let's have a look at the code. Here's the relevant HTML:

HTML Code:
<div class = "main_categories">

					<div class = "thumbnail_1" id = "thumbnail_1">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_1.jpg" onClick = "change_images('image1', 'description_1')"></a>
					</div><!--END OF thumbnail_1 -->
				        ...
					<div class = "thumbnail_14" id = "thumbnail_14">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_14.jpg" onClick = "change_images('image14', 'description_14')"></a>
					</div><!--END OF thumbnail_14 -->

					<div class = "clear">
					</div> <!-- END OF clear -->

					<div class = "overlay">
					</div><!-- END OF overlay -->

					<div class = "full_images" id = "full_images">

						<div class = "image_div" id = "image_div">
							<img src = "images/czech_page/czech_full_1.png" alt = "" id = "image1" >
							<p id = "description_1"><b>this is image 1.</b></p>
							...
							<img src = "images/czech_page/czech_full_14.png" alt = "" id = "image14" >
							<p id = "description_14"><b>this is image 14.</b></p>


								<div class = "close_button">
									<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
								</div><!-- END OF close_button -->

						</div><!--END OF image_div -->

					</div><!-- END OF full_images -->


			</div><!--END OF main_categories -->
here's the script that handles the big images (when you click on the thumbnails the big pictures come up - the file is main_pix.js):

Code:
var $full_images;
var $close_button;
var $overlay;

$(function(){
	$full_images = $(".full_images");
	$close_button = $(".close_button");
	$overlay = $(".overlay");
	
	
});

function change_images(image, text){
		var $images = $("#" + image);
		var $description = $("#" + text);
		
		$overlay.hide().show();
		
		$full_images.hide().show("slow");
		$images.hide().fadeIn(1000);
		$description.hide().fadeIn(1000);
		$close_button.hide().show();
		
		$close_button.unbind('click').click(function(){
					$(this).hide();
					$images.fadeOut();
					$description.fadeOut();
					$full_images.hide();
					$overlay.hide();					
					
		});


}
And finally here's the script that is causing problems (the file is no_script.js):

Code:
function no_javascript(){
	//thumbnails
	document.getElementById('thumbnail_1').style.display='block';
	...
	document.getElementById('thumbnail_14').style.display='block';

	
	//big images
	document.getElementById('image1').style.display="none";
	...
	document.getElementById('image14').style.display="none";

	
	//big images repositioning
	var big_images = document.getElementById('full_images');
	big_images.style.position = "fixed";
	big_images.style.margin = "-245px 0 0 -350px";
	big_images.style.display = "none";
	big_images.style.backgroundColor = "transparent";
	big_images.style.color = "white";
	//big_images.style.fontSize = "0.9em";
	
	/*var the_pic = document.getElementById('image_div');
	the_pic.style.position = "fixed";
	the_pic.style.display = "none";
	the_pic.style.margin = "-525px 0 0 170px";
	the_pic.style.color = "white";*/

	
	//descriptions
	var description1 = document.getElementById('description_1');
	...
	var description14 = document.getElementById('description_14');
	
	
	description1.style.display = "none";
	description2.style.display = "none";
	description3.style.display = "none";
	description4.style.display = "none";
	description5.style.display = "none";
	description6.style.display = "none";
	description7.style.display = "none";
	description8.style.display = "none";
	description9.style.display = "none";
	description10.style.display = "none";
	description11.style.display = "none";
	description12.style.display = "none";
	description13.style.display = "none";
	description14.style.display = "none";


}
Now, surely you can see the problem. If the page has 14 pictures, all works fine but if another page, say with 8 pictures calls the same script things go bananas.
So my attempt to fix things produced this: http://antobbo.webspace.virginmedia....h_republic.htm

When you click on the thumbnails all the big pictures come up as well as the description. So what have I changed? I have changed the html slightly. On the above code the div containing the thumbnails
also contained the big images, but in the new version I have separated, so that the thumbnails have their own div and the big images their own and they are at the same level. I thought
this would give me more flexibility.
Here's the new html:

HTML Code:
<div class = "main_categories" id = "main_categories">


					<div class = "thumbnail_1" id = "thumbnail_1">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_1.jpg" onClick = "change_images('image1', 'description_1')"></a>
					</div><!--END OF thumbnail_1 -->

					<div class = "thumbnail_2" id = "thumbnail_2">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_2.jpg" onClick = "change_images('image2', 'description_2')"></a>
					</div><!--END OF thumbnail_2 -->
					
					...


					<div class = "thumbnail_14" id = "thumbnail_14">
						<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_14.jpg" onClick = "change_images('image14', 'description_14')"></a>
					</div><!--END OF thumbnail_14 -->

					<div class = "clear">
					</div> <!-- END OF clear -->

					<div class = "overlay">
					</div><!-- END OF overlay -->

					</div><!--END OF main_categories -->

					<div class = "full_images" id = "full_images">


						<div class = "image_div" id = "image_div">
							<img src = "images/czech_page/czech_full_1.png" alt = "" id = "image1" >
							<p id = "description_1"><b>this is image 1.</b></p>
							...
							<img src = "images/czech_page/czech_full_14.png" alt = "" id = "image14" >
							<p id = "description_14"><b>this is image 14.</b></p>


								<div class = "close_button">
									<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
								</div><!-- END OF close_button -->

						</div><!--END OF image_div -->

					</div><!-- END OF full_images -->


That done I have changed the no_script.js file which now

Code:
function no_javascript(){
	//thumbnails
	document.getElementById('main_categories').style.display='block';
	
	//big images repositioning
	
	var big_images = document.getElementById('full_images');
	big_images.style.display = "none";
	big_images.src.style.display = "none";
	big_images.style.position = "fixed";
	big_images.style.margin = "-245px 0 0 -350px";	
	big_images.style.backgroundColor = "transparent";
	big_images.style.color = "white";
	//big_images.style.fontSize = "0.9em";
	
	
}
it still grabs the full_images div (this is the one that contains the big images) but I have removed the code that handles each image one by one because I am looking for a better way to
apply the display:none to all the pictures in one go. I had to remove that because, as I mentioned above, the script works only for a page with 14 images.

Consequently the other script main_pix.js now doesn't work anymore.

Now, can anybody help me please to debug and find a way to make this work? sorry I have made a mess...and sorry for the long post (I have remove the unnecessary code especially when it comes down to the pictures, I have jumped from picture 1 directly to picture 14)