Hi peeps, I really hope you will be able to help me. I am doing a website for a client, and I have got stuck. Let me show you what I have done and what I have tried to amend.
Let's look at this page so hopefully things will be clearer: http://antobbo.webspace.virginmedia....h_republic.htm. The script here works fine, in that you click on a thumbnail and it brings up a page with the corresponding text. This is the way it should work. But I have run into a problem. Let me give a bit of background. If you have javascript off the thumbnails are hidden and users can only see the big pictures one above the other. If javascript is on instead you will get the thumbnails and by clicking on them you get the big images. Here is the relevant html:

this is image 1.

this is image 2.

this is image 3.

this is image 4.

this is image 5.

this is image 6.

this is image 7.

this is image 8.

this is image 9.

this is image 10.

this is image 11.

this is image 12.

this is image 13.

this is image 14.


here's the script that handles the big images:

var $full_images;
var $close_button;
var $overlay;

$full_images = $(".full_images");
$close_button = $(".close_button");
$overlay = $(".overlay");


function change_images(image, text){
var $images = $("#" + image);
var $description = $("#" + text);






The scripts that handles the thumbnails is this instead:
function no_javascript(){
document.getElementById('thumbnail_1').style.displ ay='block';
document.getElementById('thumbnail_2').style.displ ay='block';
document.getElementById('thumbnail_3').style.displ ay='block';
document.getElementById('thumbnail_4').style.displ ay='block';
document.getElementById('thumbnail_5').style.displ ay='block';
document.getElementById('thumbnail_6').style.displ ay='block';
document.getElementById('thumbnail_7').style.displ ay='block';
document.getElementById('thumbnail_8').style.displ ay='block';
document.getElementById('thumbnail_9').style.displ ay='block';
document.getElementById('thumbnail_10').style.disp lay='block';
document.getElementById('thumbnail_11').style.disp lay='block';
document.getElementById('thumbnail_12').style.disp lay='block';
document.getElementById('thumbnail_13').style.disp lay='block';
document.getElementById('thumbnail_14').style.disp lay='block';

//big images
document.getElementById('image1').style.display="n one";
document.getElementById('image2').style.display="n one";
document.getElementById('image3').style.display="n one";
document.getElementById('image4').style.display="n one";
document.getElementById('image5').style.display="n one";
document.getElementById('image6').style.display="n one";
document.getElementById('image7').style.display="n one";
document.getElementById('image8').style.display="n one";
document.getElementById('image9').style.display="n one";
document.getElementById('image10').style.display=" none";
document.getElementById('image11').style.display=" none";
document.getElementById('image12').style.display=" none";
document.getElementById('image13').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";*/

var description1 = document.getElementById('description_1');
var description2 = document.getElementById('description_2');
var description3 = document.getElementById('description_3');
var description4 = document.getElementById('description_4');
var description5 = document.getElementById('description_5');
var description6 = document.getElementById('description_6');
var description7 = document.getElementById('description_7');
var description8 = document.getElementById('description_8');
var description9 = document.getElementById('description_9');
var description10 = document.getElementById('description_10');
var description11 = document.getElementById('description_11');
var description12 = document.getElementById('description_12');
var description13 = document.getElementById('description_13');
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 you can see the problem here I am sure. The page I linked to above has 14 pictures but there are other pages with more and others with less pictures, so the above works only if the page has 14 pictures, if the number changes the script doesn't work anymore of course (sorry I have realized this only when I created another page with less pictures). SO now I am stuck, I have to find a way to make sure that the script can handle as many picture as needed.
What I am supposed to know I think is to make sure that the last script can actually hides the div containing the big images that will eventually be displayed by clicking on the thumbnails
I am working towards a solution but the new script I came up with is not working properly because of the way the divs are positioned in the html page, have a look at the result here http://antobbo.webspace.virginmedia.com/petras/home.htm. As you can see now if you click on a thumbnail the wrong picture and the wrong text appear. What have I changed? Well the script handling the thumbnails is much smaller:
function no_javascript(){
document.getElementById('main_categories').style.d isplay='block';

//big images repositioning

var big_images = document.getElementById('full_images');
big_images.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";


The html has also changed. In the previous one the div containing the big pictures (full_images) was inside the div containing the thumbnails (main_categories). In this last version instead I had to separate the big pictures and the thumbnails so they sit in 2 divs at the same level not within one another.

Can anybody be so kind to help me to debug? I have to present the website to the client ideally next week and I shouldn't really postpone the launch too much but I am stuck with this problem now and I don't know how to resolve it.
if you look at it the