How to Create a CSS Photo Gallery

Posted by narrowband - 19/01/07 at 12:01:04 pm

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:

34 Comments »

RSS feed for comments on this post. TrackBack URI

  1. nice nice..i didnt realise that your site had that inplace.. i thought why got a weird void in your post wan. hahaha…

    nice addition :)

    maybe you could create a plugin with this :P

    Comment by CincauHangus — January 19, 2007 #

  2. I was last at 1/4 of the post.

    Comment by Jason — January 19, 2007 #

  3. I mean lost

    Comment by Jason — January 19, 2007 #

  4. Cincau – that’s a good idea! But I think I should work on my php skills first.. hehe.

    Jason – Gee. Could we break it up to part-by-part, and point out which section in particular (specifically) that you were at lost… Like where onwards?

    Sorry if I’d documented it poorly. But I thought the tip presented on Dynamic Drive was sufficiently helpful.

    My post should serve as a ‘supplement’ to what Dynamic Drive originally had. Mine’s in no way a standalone post :)

    Comment by narrowband — January 19, 2007 #

  5. Hey interesting…I might try it one day (if i’m hardworking hahaha). Thanks for sharing with all of us. :)

    Comment by Che-Cheh — January 19, 2007 #

  6. hahaha.. me too.. i’ll be learning php this coming semester.. maybe after that i’ll try to make my own theme first.. if it works, maybe i’ll help you with your plugin :P

    Comment by CincauHangus — January 21, 2007 #

  7. i think if u make it a little more technical, jason may be able to understand it. :P

    Comment by CincauHangus — January 21, 2007 #

  8. Che-cheh – Ok! It’s quite simple one actually! U can msn me if you’re stuck :)

    Cincau – Wah *sweat -_-”..*. I just wish that there were 48 hours within one day!!

    Comment by narrowband — January 21, 2007 #

  9. lol i remember when i 1st started blogging. you probably pekchek giler teaching me also..hahah

    Comment by pembesar — January 21, 2007 #

  10. Aha, nah. Didn’t pekchek ;). I’m glad you ‘saw the light’ in the end anyway.

    Comment by narrowband — January 22, 2007 #

  11. hey, your photo gallery.. why not use gallery2?

    Comment by CincauHangus — January 23, 2007 #

  12. Thanks for your recommendation – That’s not too bad too actually. Shall consider using it in future galleries!

    Comment by narrowband — January 23, 2007 #

  13. haha.. yea.. i’ve been testing a few during my free time.. i found gallery2 is the best and with most features.. but it comes very big.. about 30mb.. hahaha…

    Comment by CincauHangus — January 23, 2007 #

  14. Hi Narrowband

    I like the ‘wide’ looknfeel of ur site.

    I would like to retain a 2 column layout(using kubrick std theme).
    But would like to maximise screen space ie .. how the hell do I widen it???!!!

    Comment by David — January 25, 2007 #

  15. Thanks David. Hmm.. that’d involve a little bit of CSS-editing.

    If you asked me, I’d do it the manual way – adjusting the values until they seem right. Especially properties that are related to “width” – leaving others untouched. Just remember to keep track of the changes you’ve made, in case something goes wrong. I’d suggest you install a fresh new WordPress and conduct your tests there!

    Comment by narrowband — January 27, 2007 #

  16. Thank you so much for getting back to me…. tried your way but still the images don’t appear correctly. I’ll stick to lightbox although I really do miss the little popup’s :)

    Karen x

    Comment by Soulgirl — February 13, 2007 #

  17. Finally narrow, thanks for sharing this here, been opening ur this page for quite a long long time i guess.. pheww.. my previous theme couldn’t support this as it was running around and not appearing – it was a mess.. now, i can sleep.. thanks to u again! :)

    Comment by Jian — February 24, 2007 #

  18. That’s probably my problem, the theme not supporting the css :)

    Comment by Soulgirl — February 24, 2007 #

  19. oh yea soulgirl guess it must the theme, spent loadsa time thinking it was my screw up of css of codes, tried a new theme and it was in! Some themes just dun really like the css gallery :) checked out ur soultown gallery and it’s kinda cool, just a lil’ loading time and it’s all smooth! :)

    Comment by Jian — February 24, 2007 #

  20. I’m glad you did it man. I spent quite some time perfecting it myself!! It was just a random trick I picked up from Dynamic Drive. There are loads of other tricks and tutorials that are worth a mention – if I had the time I shall try them. Why don’t you go check them out too? I’m sure it’ll be fun. Nothing beats seeing our own hardwork paying off! :)

    Comment by narrowband — February 24, 2007 #

  21. Thanks Jian :D I’m happy with my current theme so I’ll leave things be for the time being :D

    Comment by Soulgirl — February 24, 2007 #

  22. [...] thanks narrowband for sharing the CSS photo gallery, gotta know tat the previous theme couldn’t support this gallery and so i’ve got it [...]

    Pingback by KuKuJian.com » Blog Archive » “Aba” in the Kitchen — March 14, 2007 #

  23. Hi, very nice gallery! any idea how to do it in blogger?

    Comment by minny — October 4, 2007 #

  24. You’ll need to host the CSS script on webspace (there are plenty of free ones around and it’s only tiny) then link to that with html in blogger :)

    Comment by Soulgirl — October 5, 2007 #

  25. Ooops! I though this was the DD post, sorry owner :)

    Comment by Soulgirl — October 5, 2007 #

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

    I want to change the enlarge photo position, but i can’t
    I change the value ” left : 230 px to bottom : 230 Px”
    but it don’t work .
    I want to change the photo position like yours
    http://narrowband.org/2007/01/09/barbeques-galore/

    could u tell me how to change ? thanks a lot.

    Comment by Ricky — February 15, 2008 #

  27. Ricky, that line “left: 230px;” handles only positional adjustments in the horizontal axis (in the cartesian coordinate system, this is referred to as the X-axis). A 230px ‘left’ value means that the image is offset to the right by 230 pixels. On the other hand, a -230px ‘left’ value will offset the image by 230 pixels to the left. Note how the negative-sign changes the direction of the offset.

    If you want to vary the position vertically, look one line above, which says “top: 0;“. This line handles positional adjustments in vertical (in the cartesian coordinate system, this is the Y-axis). A zero ‘top’ value means that the image is offset by zero pixels from the top (no change). A negative ‘top’ value means that the image will be offset upwards. Conversely, a positive ‘top’ value will offset the image downwards. Try different values like “top: -230px” and “top: 230px” and see the difference. Again, note how the negative-sign changes the direction of the offset.

    *Technical note (optional, but useful to know in this case): In the case of this CSS photo gallery, the ‘top’ and ‘left’ attributes are referenced from where your
    “<div class=”gallerycontainer”>” is located. So if you say for example, “top: 25px”, it just means that the image will appear 25 pixels from the top of the “<div class=”gallerycontainer”>” code (increasing this value will bump the image lower downwards).

    I’d suggest you first try to leave that “left: 230px;” alone, and fiddle with the line above it, which says “top: 0;“. Change that to “top: 200px” or something and observe. I believe that’s what you’re looking for.

    Comment by narrowband — February 16, 2008 #

  28. Hi! I have two posts in my blogger blog that contain a picture gallery. I have placed gallerycontainer codes in two widgets to cater for both. Both have different settings but one overides the other. Not a good look!
    I have taken one down for the moment. Is there a workaround for this, please?

    Comment by Peter McCartney — July 2, 2008 #

  29. Not sure what your problem is, but check for these, one of them might be your solution:

    1. With reference to my last para in my entry, change the value for parameters “top” and “left”. Try varying them and see the effect. This should adjust the position of which your enlarged images would appear.

    2. Did you rename one of the “gallerycontainer”s to “gallerycontainer1″ or something? Can’t have both with the same name.

    Good luck!

    Comment by narrowband — July 2, 2008 #

  30. Hi and thank you. The two gallerycontainer names are different. They are recognised but the settings are not. – Peter

    Comment by Peter McCartney — July 3, 2008 #

  31. My CSS file (copy and paste into browser address bar)

    http://narrowband.org/wp-content/themes/intense1/style.css

    Scroll right to the bottom, you’ll see how I did it. Each gallerycontainer has its own set of parameters. Make sure the parameters’ names are different for the two gallerycontainers too.

    Comment by narrowband — July 3, 2008 #

  32. Thank you very much Narrowband for going to so much trouble. I’ll give it a go and I’m sure it will work out just great – Take Care – Peter

    Comment by Peter McCartney — July 3, 2008 #

  33. Hi! I hadn’t renamed the thumbnail refs, silly me! Thank you again

    Comment by Peter McCartney — July 3, 2008 #

  34. Great article! Many don’t realize the unique gem quality of good css photo gallery articles. Most of the techniques can be applied easily to CSS Galleries. We gleam a few tips from this article. Keep the articles coming!

    Comment by CSS Gallery — March 20, 2009 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.