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:
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):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 -->
And finally here's the script that is causing problems (the file is no_script.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(); }); }
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.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"; }
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
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 toCode: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"; }
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)
Reply With Quote
Bookmarks