CSS Photo Gallery

Showing a Photo Gallery with Thumbnails

Before you make your gallery you should to do a few things:

  1. Determine how many images across you want to have
  2. Determine how much space you want between each image.
  3. Determine how wide it will be.

Let’s say you have eight images. Each image will be 100×100 pixels and you want 20 pixels of space inbetween each image. You will need 460 pixels of width.

However if you set the margin by doing something like margin-right:20px then the fourth image on the right will also have 20 pixels to its right so the width is 480 pixels. You can solve this by adding a special class to the fourth and eight image but to keep things simple for now we will go with the 480px width.

Now let’s look at how to make the gallery. If you don’t already have the images then you should make them in Photoshop. See this resource for help in making the images.

  1. Add a div element that will hold all of the images. Give it an id. In this example we are using <div id=”gallery></div>
  2. Add a div for each of your images. Each of these divs should have a class. In our example this class is thumb. Remember it’s a class and not a div because we will use it on more than one element on the page. I’m leaving out the alt attribute simply to save space here. Each of your images should have an alt attribute so people who can’t see or are using a browser with no images, can know about the picture.If you want a simple gallery with a small amount of space between each image then you don’t need this. You can basically just put all of the images in a div and that’s it.
    
    <div id="gallery">
    	<div class="thumb"><img src="IMG_0415.JPG" /></div>
    	<div class="thumb"><img src="IMG_0415.JPG" /></div>
    	<div class="thumb"><img src="IMG_0415.JPG" /></div>
    	<div class="thumb"><img src="IMG_0415.JPG" /></div>
    	<div class="thumb"><img src="IMG_0415.JPG" /></div>
       <div class="thumb"><img src="IMG_0415.JPG" /></div>
    </div>
    
  3. The page will look something like this:screenshot of page with 8 images and no styling.
  4. The next step is to add some CSS. First we will float them. Here’s the CSS and how it should look.
    
    thumb{ float:left; }
    

    screenshot of page with 8 images and no styling.

  5. Now we will add the 20 pixel right margin. Again the CSS and how it should look:
    
    thumb{
    	float:left;
       margin-right:20px;
    }
    

    screenshot of page with 8 images floated and a right margin of 20px

  6. Now we need to make the containing div (we gave it an ID of gallery) only 480 pixels wide like we determined at the beginning:
    
    #gallery{
    	width:480px;
    }
    

    screenshot of page with 8 images floated and a right margin of 20px and the containing gallery div set to 480 pixels width.

  7. Now we will add a margin at the bottom as well to give more separation. Here’s all the CSS and another screenshot.
    
    #gallery{
    	width:480px;
    }
    .thumb{
    	float:left;
       margin-right:20px;
    	margin-bottom:20px;
    }
    

    screenshot of page with 8 images floated, a right margin of 20px, and bottom margin of 20px on each image and the containing gallery div set to 480 pixels width.

  8. Now let’s try adding a border around the gallery.
    
    #gallery{
    	width:480px;
       border:1px solid black;
    }
    .thumb{
    	float:left;
       margin-right:20px;
    	margin-bottom:20px;
    }
    

    screenshot of page with 8 images floated, a right margin of 20px, and bottom margin of 20px on each image and the containing gallery div set to 480 pixels width with a 1px black border.

  9. Why is the border only appearing at the top of the images? It’s because when we floated the divs with the images they went out of the normal flow. To force the gallery div to be as tall as the thumb divs we have to put a clearing div at the bottom. Here’s the new HTML:
<div id="gallery">
	<div><img src="thumbs/IMG_9698_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_9656_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0507_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0494_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0482_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0443_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0441_tb_square.jpg" /></div>
   <div><img src="thumbs/IMG_0415_tb_square.jpg" /></div>
   <div class="clearing"></div>
</div>
  1. And the new CSS:
    
    #gallery{
    	width:480px;
    	border:1px solid black;
    }
    .thumb{
    	float:left;
       margin-right:20px;
    	margin-bottom:20px;
    }
    .clearing{
    	clear:both;
    }
    

    And the new look

    gallery with the clearing div added so now the border goes around the images.

  2. If you want to keep the border like this but want the spacing even you can add it in on the top and the left by using padding on the #gallery id instead of fiddling with the .thumb class.
    
    #gallery{
    	width:480px;
    	border:1px solid black;
    	padding-top:20px;
    	padding-left:20px;
    }
    

    gallery with the clearing div added so now the border goes around the images.

  3. Now let’s look at adding in a caption. We’ll do that by adding a paragraph element with the caption inside of each thumb div.
    
    	<div class="thumb"><img src="thumbs/IMG_9698_tb_square.jpg" />
       	<p>caption 1</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_9656_tb_square.jpg" />
       	<p>caption 2</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0507_tb_square.jpg" />
       	<p>caption 3</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0494_tb_square.jpg" />
       	<p>caption 4</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0482_tb_square.jpg" />
       	<p>caption 5</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0443_tb_square.jpg" />
       	<p>caption 6</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0441_tb_square.jpg" />
       	<p>caption 7</p>
       </div>
       <div class="thumb"><img src="thumbs/IMG_0415_tb_square.jpg" />
       	<p>caption 8</p>
       </div>
    

    gallery with captions on each image

  4. The problem is if you have long captions:gallery with one caption that's too long and breaks the layoutOne way to start solving the problem is to add a width to the thumb class:
    
    .thumb{
    	float:left;
       margin-right:20px;
    	margin-bottom:20px;
    	width: 100px;
    	height: 200px;
    }
    

    gallery with width set but long caption still breaks layout.

    This still has a problem with the next line of floated images. You can start to solve this with a height property as well. However you will also just have to make sure your captions aren’t too long. There’s no good solution to a caption that is just too long. Here’s the CSS and an screenshot where the height has been set and the captions vary in length but none are too long.

    
    #gallery{
    	width:480px;
    	border:1px solid black;
    	padding-top:20px;
    	padding-left:20px;
    }
    .thumb{
    	float:left;
       margin-right:20px;
    	margin-bottom:20px;
    	width: 100px;
    	height: 200px;
    }
    .clearing{
    	clear:both;
    }
    

    gallery with captions of variying height that all fit within the height set in css

That’s it for this tutorial. You can add more things like putting a border around each image instead of the gallery.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>