Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Aug 2010
    Location
    everywhere
    Posts
    63
    Thanks
    2
    Thanked 3 Times in 3 Posts

    How do i make a css photo gallery?

    Im looking to make a css photo gallery. Very simple that can fit on one page, and has no javascript or anything fancy. It's for a school project and all we have learned is CSS and HTML coding.

  • #2
    Regular Coder
    Join Date
    Mar 2010
    Location
    Orlando, FL
    Posts
    154
    Thanks
    2
    Thanked 8 Times in 8 Posts
    You can easily accomplish this by making each picture the background of whatever your gallery is going to be. For example, if there is a <div> for the frame of the gallery, then make a picture the background to that <div>. If you want a "Next" and "Back" option, then have the hyperlink take the user to a new page where that <div>'s background is a different picture.

  • Users who have thanked wojo1086 for this post:

    getbestproduct (10-26-2010)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Here's a way that I did it. I took twelve images, sized them to 100px height and absolutely positioned them on the left and right sides of a div. Then I made the css for the images so that when you hovered over one it completely filled the div. It made a nice show but did not work in older versions of IE, so I later rewrote it in javascript and also made it work as a slide show.

  • Users who have thanked DrDOS for this post:

    getbestproduct (10-26-2010)

  • #4
    Banned
    Join Date
    Aug 2010
    Location
    everywhere
    Posts
    63
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Thanks,I will have a try.

  • #5
    New Coder
    Join Date
    Aug 2009
    Location
    Cochin,India
    Posts
    39
    Thanks
    2
    Thanked 1 Time in 1 Post
    Try this

    Code:
    <html>
    <head>
    <style type="text/css">
    div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    }	
    div.img img
    {
      display: inline;
      margin: 3px;
      border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
      text-align: center;
      font-weight: normal;
      width: 120px;
      margin: 2px;
    }
    </style>
    </head>
    <body>
    
    <div class="img">
     <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    
    </body>
    </html>

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Is this what you mean?


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •