script not handling images properly

[dupalo]

Hi there, sorry for the long post but I am having some issues with my website.
Basically I have realized that the way I was handling pictures with javascript wasn't correct and I have made some changes that unfortunately haven't solved anything at all, but made the situation worse.

I have a set of thumbnails and big pictures in my html page. If you have javascript enabled, the thumbnails disappear and all you can see are big pictures with relevant description one after another one. If javascript is enabled instead you will get the thumbnails and the corresponding big picture is accessible through clicking on the thumbnail.
In the previous version of the site everything was working almost fine but the problem was that I was hiding the big pictures 1 by 1 which is not the best method if you want to add pix on a later date. So I have hidden the containing div instead, but obviously when jquery makes it visible all the pictures are visible. Let's have a look at the code. Here's the relevant html:

...
<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_3" id = "thumbnail_3">
<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/czech_page/czech_thumb_3.jpg" onClick = "change_images('image3', 'description_3')"></a>
</div><!--END OF thumbnail_3 -->

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

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

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

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

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

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

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

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

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

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

<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_2.png" alt = "" id = "image2" >
<p id = "description_2"><b>this is image 2.</b></p>
<img src = "images/czech_page/czech_full_3.png" alt = "" id = "image3" >
<p id = "description_3"><b>this is image 3.</b></p>
<img src = "images/czech_page/czech_full_4.png" alt = "" id = "image4" >
<p id = "description_4"><b>this is image 4.</b></p>
<img src = "images/czech_page/czech_full_5.png" alt = "" id = "image5" >
<p id = "description_5"><b>this is image 5.</b></p>
<img src = "images/czech_page/czech_full_6.png" alt = "" id = "image6" >
<p id = "description_6"><b>this is image 6.</b></p>
<img src = "images/czech_page/czech_full_7.png" alt = "" id = "image7" >
<p id = "description_7"><b>this is image 7.</b></p>
<img src = "images/czech_page/czech_full_8.png" alt = "" id = "image8" >
<p id = "description_8"><b>this is image 8</b>.</p>
<img src = "images/czech_page/czech_full_9.png" alt = "" id = "image9" >
<p id = "description_9"><b>this is image 9</b>.</p>
<img src = "images/czech_page/czech_full_10.png" alt = "" id = "image10" >
<p id = "description_10"><b>this is image 10.</b></p>
<img src = "images/czech_page/czech_full_11.png" alt = "" id = "image11" >
<p id = "description_11"><b>this is image 11.</b></p>
<img src = "images/czech_page/czech_full_12.png" alt = "" id = "image12" >
<p id = "description_12"><b>this is image 12.</b></p>
<img src = "images/czech_page/czech_full_13.png" alt = "" id = "image13" >
<p id = "description_13"><b>this is image 13.</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 -->

...

The script that handles the thumbnails and big images is this:

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.image.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";


}

here I have hidden the full_images div that contains the big pictures and the descriptions but I need to hide all the big pictures to make the following script effective:

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();


});


}

This one handles the way the big pictures are displayed once you click on a thumbnail.

The relevant css bits are here:

...
#main_categories
{

display:none;

}

.full_images
{

/*display:none;*/
background-color:transparent;
/*position:fixed;*/
width:680px;
height:485px; /*490px */
z-index:102;
left:50%;
top:50%;
/*margin:-245px 0 0 -350px;*/
margin: 0 auto;
color:black;
/*opacity: 0.45;*/

}

.image_div
{


border:1px solid transparent;
width:660px;
height:450px;
margin:8px auto 0;
z-index:103;
/*display:none;*/
/*no positioning so that I can centre the image*/
}

.close_button
{

display:none;
position:absolute;
top:0;
right:0;
z-index = 104;

}

.overlay
{

display:none;
background-color:black;
position:fixed;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
top:0;
bottom:0;
right:0;
left:0;
width:100%;
z-index:100;

} 

I know links are not allowed so I haven't included it, but, if for the sake of clarity you want me to include the url of the faulty site let me know
Can anybody kindly help me to debug and make sure I can display the pictures properly with the descriptions?
thanks

[daveVk]

Start by stripping html to essentuals

eg

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

becomes


<div><img class="noBorder" alt="" src="images/czech_page/czech_thumb_1.jpg" ></div>

same for main images

<div><img src = "images/czech_page/czech_full_1.png" alt = "" ><p><b>this is image 1.</b></p></div>

I included the image and associated paragraph in a div to make pair easier to identify.

On page load you need to attach onclick handler to each of thumbnails such that nth thumbnail div effects nth image div.