Here is a very simple tutorial on how to create an image gallery using only some simple java, HTML and CSS. Hope this can of some use to you guys. Preview: To see a live demo of the gallery, click HERE. Screenshot: Step One Just copy this code, and past it into a blank HTML file. gallery.html or whatever you decide to name it. <html> <head> <title>Image Gallery</title> <style> body { background-color:#FFFFFF; color:#000000; font-family:Arial; font-size:11pt; letter-spacing:1; } .thumbnail { border:1px solid #000000; } .thumbSelected { border:1px solid #000000; } </style> <script language=javascript> var lastID = 0; function SelectImg(id) { if (lastID > 0) { document.getElementById(lastID).className = "thumbnail"; } document.getElementById(id).className = "thumbSelected"; document.getElementById(0).src = document.getElementById(id).src; lastID = id; } function LoadTrigger() { SelectImg(1); } window.onload = LoadTrigger; </script> </head> <body> <center> <b>Click on a thumbnail to view it full size.</b> <table cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"> <img id=1 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama5.png" width=140 onclick="SelectImg(1)"> <img id=2 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama7.png" width=140 onclick="SelectImg(2)"> <img id=3 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama8.png" width=140 onclick="SelectImg(3)"><br> <img id=4 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama9.png" width=140 onclick="SelectImg(4)"> <img id=5 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama4.png" width=140 onclick="SelectImg(5)"> <img id=6 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama2.png" width=140 onclick="SelectImg(6)"><br> <img id=7 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama10.png" width=140 onclick="SelectImg(7)"> <img id=8 class="thumbnail" src="http://www.geek4ums.com/gallery/futurama/futurama1.png" width=140 onclick="SelectImg(8)"> </td> <td width="10"> </td> <td align="center" valign="top"> <img id=0 src=""> </td> </tr> </table> </center> </body> </html> Code (markup): Step Two Alter the code to correspond with the images you have hosted on your own server. Just swap out the URL for the correct URL of your image. <img id=1 class="thumbnail" src="YOUR_IMAGE_URL_HERE" width=140 onclick="SelectImg(1)"> Code (markup): Step Three To add more images, simply copy and paste the single image code over and over, giving it a unique ID number each time. For example, you would change the number <b>"1"</b>, in the following code to a different number with every image you add. <img id=1 class="thumbnail" src="YOUR_IMAGE_URL_HERE" width=140 onclick="SelectImg(1)"> Code (markup): Step Four AFTER every 3 images, place the following code to ensure proper alignment: <br> Code (markup): Thats it. Thank you for reading this tutorial.
Yes, was about to say exactly the same. Cant see what is "special" about it at all? To be honest, it is actually fairly poor implimentation given that each image is actually the full size image "squashed" into a thumbnail size. For bandwidth and speed of loading you are much better off actually having thumbnails.
Not only that but it doesn't use a proper DOCTYPE, forcing each browser to guess how the page is supposed to be rendered. If you want to see this in action using CSS, check these out: http://mikecherim.com/experiments/css_map_pop.php http://www.pmob.co.uk/pob/disjointed1.htm
is there any way that I can use more than 1 table on the same page and have each table open its own thumbnails?
im trying to creat seperate tables for more than one person, and each needs to have his/her own thumbnails.
Contents of a data table, like what you'd find in a table of records, an Excel spreadsheet, a list of favorite songs grouped by who wrote the songs and what album they were in, for example.
the only data will be thumbnail pics. Exactly as on the example site here "http://www.geek4ums.com/gallery.html"
You know, I'm surprised that page even WORKS. It's not using just CSS (and invalid HTML), but also JavaScript. I think you'll be better off looking for disjointed CSS rollovers on Google (google.com).
hi thank u for your tutorial however can u please give me a confirmation message to say that you have given this consent for me to use this code and modify it for my university assignment. pretty please and thank youp.s this finally worked none others worked on ma webpagethank you