1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Creat an Image Gallery using nothing but SIMPLE HTML and CSS

Discussion in 'HTML & Website Design' started by frodosringfinger, Jul 25, 2007.

  1. #1
    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:
    [​IMG]

    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.
     
    frodosringfinger, Jul 25, 2007 IP
    nwk likes this.
  2. invisible2007

    invisible2007 Peon

    Messages:
    93
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    hey nice tut.
    thanks!
     
    invisible2007, Jul 25, 2007 IP
  3. benihana

    benihana Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It maybe simple HTML and CSS - but its javascript that makes it work:confused:
     
    benihana, Jul 25, 2007 IP
  4. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    AstarothSolutions, Jul 25, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Dan Schulz, Jul 25, 2007 IP
  6. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    is there any way that I can use more than 1 table on the same page and have each table open its own thumbnails?
     
    ICE_monky, Jul 27, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You probably could, but why would you want to? Are the tables holding tabular data?
     
    Dan Schulz, Jul 27, 2007 IP
  8. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    im trying to creat seperate tables for more than one person, and each needs to have his/her own thumbnails.
     
    ICE_monky, Jul 29, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    And are these tables holding tabular data? Are image thumbnails tabular data?
     
    Dan Schulz, Jul 29, 2007 IP
  10. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #10
    Nice tutorial frodosringfinger..
    Bookmarked and green rep added..:)
     
    nwk, Jul 29, 2007 IP
  11. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    What do u mean by tabular data?
     
    ICE_monky, Jul 30, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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.
     
    Dan Schulz, Jul 30, 2007 IP
  13. ICE_monky

    ICE_monky Peon

    Messages:
    95
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    the only data will be thumbnail pics. Exactly as on the example site here "http://www.geek4ums.com/gallery.html"
     
    ICE_monky, Jul 31, 2007 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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).
     
    Dan Schulz, Aug 1, 2007 IP
  15. princess12

    princess12 Guest

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #15
    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
     
    princess12, Apr 17, 2012 IP
  16. seoteam87

    seoteam87 Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    hi it nice and useful for all
     
    seoteam87, Apr 20, 2012 IP
  17. nightshade877

    nightshade877 Peon

    Messages:
    37
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Thanks for the tutorial. This was very helpful guys
     
    nightshade877, Apr 25, 2012 IP