This is based on the article on Dynamic Drive. I applied the technique in one of my posts early this month. That single post contained 32 images. To display all of them within a post would take up a lot of space, so the CSS Photo Gallery is the perfect solution.

Firstly, prepare your images. Resize them accordingly (I use Photoshop CS). For each of the images, you need to also have a thumbnail. For example, if you have image.jpg (in, say, 400px * 300px), remember to create one corresponding image_thumbnail.jpg (in 100px * 66px, for example) as well. Similarly, for the subsequent images, you should have image2.jpg and its corresponding image2_thumbnail.jpg, and so on.

Next, it’s the CSS. You need to edit your CSS file (usually, for Wordpress, it’s your style.css file). Open it using Notepad, and add the code in anywhere you like (I put mine right at the bottom. You don’t need to delete any lines). The CSS code to be added can be found here (tip: Just click ‘Select Code’ and Copy everything). Remember it’s the CSS code you’re supposed to Copy, ignore the HTML code for now. Edit@1312hrs: I forgot to mention something. For Wordpress’ style.css file, you don’t need to copy the first and last lines: <style type=”text/css”> and </style>. Like this:

How to Create a CSS Photo Gallery | Narrowband.org Images
Please ignore the red underlines - it’s my Firefox’s auto spell-check ;-)

That’s simply because they already exist in your style.css (the first line at the top, and the last line at the bottom). It’ll be redundant to have them appear twice!

Then, save the changes made to your style.css. Now, you are ready to write a post in Wordpress and use this CSS functionality. So, log in to your Wordpress and write a new post as you would always do. Remember to turn off Visual Rich Editor (I’ve never found Visual Rich Editor helpful - never use it). Throw in the HTML code which can be found here (tip: again, click ‘Select Code’ and everything in there will be highlighted. Copy them and Paste into your Writing area.). Edit@1312hrs: For this, yes you need everything including the first and the last lines: <div class=”gallerycontainer”> and </div>. Like this:

How to Create a CSS Photo Gallery | Narrowband.org Images

Now, on to things (in the HTML code that you copied) that you should change - the filenames (and paths). Unless you’re very sure, use absolute address rather than relative address to be safe. This means that for each <img src=”foldername/filename.jpg”…, use instead <img src=”http://www.yourdomain.com/foldername/filename.jpg”… this will take you directly to where the file is kept. Note the sequence: The thumbnail should precede the actual image. (From the code on Dynamic Drive, you can see that the thumbnails are denoted by the suffix ‘_thumb’).

“<br/>” in the code simply means ‘begin in a new line’. That is why you see in the examples there are two images in row one, and then comes the “<br/>”, followed by two more images in row two, and so on.

Where do the Enlarged Images Appear?

This needs to be adjusted in the style.css file ;). So, again, open it using Notepad and scroll until you see this:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Change the ‘top’ and ‘left’ values. These values indicate how many pixels to offset (relative to where your <div class=”gallerycontainer”> is in the HTML code). If you want the enlarged images to appear on top of the thumbnails, put values like ‘top: -300px’ or something. If you want it to appear below, try ‘top: 300px’. ‘top: 0′ means that the image will appear at the same level (horizontal) with the thumbnails. Similarly, adjust the ‘left: 230px’ value accordingly. A negative value means the enlarged images (strictly speaking, it’s the top-left edge of the image) will appear on the left handside of the thumbnails. Try different values to see the effect.

This is the basic idea on how the code works. Once you get a hang of it, you could try to do a gallery like mine. Good luck!

Update [Feb 24th@1511hrs]: A friend of mine, Jian, successfully made his own CSS Photo Gallery, similar to the one I did. It’s good!!

Related Entries: