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.com/petras/test/czech_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: ... <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_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 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 --> </div><!--END OF main_categories --> ... here's the script that handles the big images: 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(); }); } The scripts that handles the thumbnails is this instead: function no_javascript(){ //thumbnails document.getElementById('thumbnail_1').style.display='block'; document.getElementById('thumbnail_2').style.display='block'; document.getElementById('thumbnail_3').style.display='block'; document.getElementById('thumbnail_4').style.display='block'; document.getElementById('thumbnail_5').style.display='block'; document.getElementById('thumbnail_6').style.display='block'; document.getElementById('thumbnail_7').style.display='block'; document.getElementById('thumbnail_8').style.display='block'; document.getElementById('thumbnail_9').style.display='block'; document.getElementById('thumbnail_10').style.display='block'; document.getElementById('thumbnail_11').style.display='block'; document.getElementById('thumbnail_12').style.display='block'; document.getElementById('thumbnail_13').style.display='block'; document.getElementById('thumbnail_14').style.display='block'; //big images document.getElementById('image1').style.display="none"; document.getElementById('image2').style.display="none"; document.getElementById('image3').style.display="none"; document.getElementById('image4').style.display="none"; document.getElementById('image5').style.display="none"; document.getElementById('image6').style.display="none"; document.getElementById('image7').style.display="none"; document.getElementById('image8').style.display="none"; document.getElementById('image9').style.display="none"; 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";*/ //descriptions 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(){ //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.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. thanks
Sorry maybe that is not making much sense and I have got one of the links wrong. The faulty website can be seen here http://antobbo.webspace.virginmedia.com/petras/czech_republic.htm. The big pictures appear them all and the reason why is that in my script 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(); }); } show the div that contains the full images (.full_images) making them all visible , whereas I need only one image at a time to be visible. <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_2.png" alt = "" id = "image2" > <p id = "description_2"><b>this is image 2.</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 --> and here's the new script that handles the visibility of the thumbnails and big images: 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"; }
first part of the solution markup rearrange (this is not the absolute solution, others may also have better solution): for category thumbnails: (1) remove ids of each thumbnail holder unless needed by your css and change the classname to a more generic class name "thumbnails" <div class="thumbnail_1" id="thumbnail_1"> --> <div class="thumbnails"> (2) change href value of anchor tag to "image(n)" you will see later why you dont need the "javascript:void(0);" <a href="javascript:void(0);"> --> <a href="image(n)"> (3) remove the inline style and add it to your stylesheet instead. remove the inline event trigger. put the description you want for the image in the "alt" attribute <img style="border: 0pt none;" src="images/czech_page/czech_thumb_1.jpg" onClick = "change_images('image1', 'description_1')"> to: <img src="images/czech_page/czech_thumb_1.jpg" alt="A description for the image"> complete example: <div class="thumbnails"> <a href="image1"> <img src="images/czech_page/czech_thumb_1.jpg" alt="this is image 1"> </a> </div> <div class="thumbnails"> <a href="image2"> <img src="images/czech_page/czech_thumb_2.jpg" alt="this is image 2"> </a> </div> <div class="thumbnails"> <a href="image3"> <img src="images/czech_page/czech_thumb_3.jpg" alt="this is image 3"> </a> </div> <div class="thumbnails"> <a href="image4"> <img src="images/czech_page/czech_thumb_4.jpg" alt="this is image 4"> </a> </div> for the holder of your full image: (1) remove id's in the elements unless the id is necessary for your script or style sheet necessary <div class = "full_images" id = "full_images"> --> <div class = "full_images"> <div class = "image_div" id = "image_div"> --> <div class = "image_div"> <img src = "images/czech_page/czech_full_1.png" alt = "" id = "image1" > --> <img src = "images/czech_page/czech_full_1.png" alt=""> <p id = "description_1"><b>this is image 1.</b></p> --> <p><b>this is image 1.</b></p> (2) remove the images and descriptions inside the "image_div", leave one img tag and one paragraph tag then add their generic class names "image" and "description" respectively. remove the values of src and alt attribute, and emptied out the description holder, and replace the bold tag with strong because <b> is already deprecated. <img src = "images/czech_page/czech_full_1.png" alt = ""> --> <img src = "" alt = "" class="image"> <p><b>this is image 1.</b></p> --> <p class="description"><strong></strong></p>[FONT=Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace] [/FONT] (3) for the close button, replace the href value of the anchor tag by "close". as i have said ealier styles should be in the style sheet rather than inline with the tags. <a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a> to: <a href="close"><img src = "images/button_9.gif" alt = ""></a> complete example for the lightbox: <div class="full_images"> <div class="image_div"> <img src = "" alt = "" class="image"> <p class="description"><strong></strong></p> <div class="close_button"> <a href="close"><img src="images/button_9.gif" alt=""></a> </div><!-- END OF close_button --> </div><!--END OF image_div --> </div><!-- END OF full_images --> for violent reactions please show your solutions.. ^^ ​ ​
i forgot to mention that instead of applying styles for the lightbox(".full_images") you must declare it on your stylesheet, this will make it hidden from the users while your javascript loads.
part 2 of the solution. JS using jquery library: // like your js structure, declare variables var $thumbs, $lightbox;​​​​​​​​​​​​​​​​​​​​​​ // when DOM ready $(function() { // define variables ​ $thumbs = $('.thumbnails a'), $lightbox = $('.full_images');​​​​​​​​​​​​​​​​​​​​​​ }); // bind click event listener on each thumbnail $thumbs.bind('click', function(e) { [FONT=Inconsolata, Monaco, Consolas, 'Andale Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace] [/FONT] // declare local variables var $this = $(this), // this will be the new url for the full image fullImg = $this.find('img').attr("src").replace("thumb", "full"), // get the alt attribute of the image clicked desc = $this.find('img').attr("alt"); // prevent the clicked anchor tag to redirecting the page to the url // specified in the href attribute e.preventDefault(); // set the attributes of the full image holder $lightbox.find('.image') .attr({ src : fullImg.replace('jpg','png'), alt : desc }); // set the text of the full image description $lightbox.find('.description') .text( desc ); // display the lightbox $lightbox.hide().fadeIn(); // bind click event on lightbox close button $lightbox.find('a[href*="close"]') .click(function(e) { e.preventDefault(); $lightbox.fadeOut(); }); }); ​
I am afraid I need all the thumbnails classes, I am using them in the css, so I think this will impact on your solution and the script you're proposing. Same with this, I need to keep them because almost each box has a slight different style Now, in your suggestion (which is great and thorough) I need to make a lot of changes to the script, css and html. I don't mind doing it if that's the way forward, but I was wondering if there is a way to just tweak the code rather than re-engineering it. I mean the major problem I have if you look at the code is to find a way to target all these images contained in full_images document.getElementById('image1').style.display="none"; document.getElementById('image2').style.display="none"; document.getElementById('image3').style.display="none"; document.getElementById('image4').style.display="none"; document.getElementById('image5').style.display="none"; document.getElementById('image6').style.display="none"; document.getElementById('image7').style.display="none"; document.getElementById('image8').style.display="none"; document.getElementById('image9').style.display="none"; 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"; and the descriptions: 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'); then I am sorted...
you may have multiple class in an element for example: <specific class> <generic> <div class="thumbnail_1 thumbnails" id="thumbnail_1"> for the images in the "images_div", you may select it using: $('.images_div > img').css('display', 'block'); and the descriptions: $('.images_div > p') and this is not re-engineering it but it is what we call "re-factoring" we just removing codes that are not necessary and just a waste of bytes and increase in loading time. but it still your call if your gonna consider it or rather throw it away.
Hi tULd0k, thanks for that. No I don't want to throw it away, I am just a little scared that your jquery code is a little too advanced for me, so I need to do some research before applying it. So, if I make the above changes plus the other changes you mentioned I should be sorted correct? I will look at the changes to the script this weekend when I have a bit more time and then I will get back to you if I have any problem thanks for your help
Hi there, I just thought I will let you know, the issue is solved now. Thanks tULd0k for setting me onto the right path, your suggestions were really helpful. It turned out that all I had to add to my script were these 2 lines: $('#image_div > img').css('display', 'none'); $('#image_div > p').css('display', 'none'); so that the script is now: 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"; $('#image_div > img').css('display', 'none'); $('#image_div > p').css('display', 'none'); thanks