I am trying to create a gallery on my site using html. I got some code off the web to create something good and did an example. I have only put on 2 thumbnails but only one works... basically both thumbnails flash up the same photo instead of their own relevant photos Any ideas and help appreciated .. i need to get this right before I put it live on a page on my site cheers <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 800px; height: 600px; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093 - Copy.JPG" width="75" height="56"></a></p> <div id="light" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> <p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094 - Copy.JPG" width="75" height="56"></a></p> <div id="light" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> </body> </html> Code (markup):
this is still doing my head in if someone can suggest how to fix it or point me towards a better version cheers
Hi, You are calling the same element ID twice and its getting defaulted to the 1st image using that element ID. Use a different ID for subsequent images like this: <p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093 - Copy.JPG" width="75" height="56"></a></p> <div id="light" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> <p><a href = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade2').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094 - Copy.JPG" width="75" height="56"></a></p> <div id="light2" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade2').style.display='none'">Close</a></div> <div id="fade2" class="black_overlay"></div> HTML:
another slight problem which is doing my head in... heres 3 images ... all 3 now open however... only image 1 and 2 will close.... image 3 stays open any idea greatful... <p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093 - Copy.JPG" width="75" height="56"></a></p> <div id="light" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1093.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> <p><a href = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade2').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094 - Copy.JPG" width="75" height="56"></a></p> <div id="light2" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1094.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade2').style.display='none'">Close</a></div> <div id="fade2" class="black_overlay"></div> <p><a href = "javascript:void(0)" onClick = "document.getElementById('light3').style.display='block';document.getElementById('fade3').style.display='block'"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1096 - Copy.JPG" width="75" height="56"></a></p> <div id="light3" class="white_content"><img src="http://www.parafly.co.uk/images/bulldog/IMG_1096.JPG" width="700" height="523"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade3" class="black_overlay"></div> Code (markup): heres an the gallery uploaded .. http://www.parafly.co.uk/bulldog.html as you can see only the first 2 images close.. the rest just mess up cheers