Pop-Up Images

by Shelbi on March 8th, 2008

I’ve had a few people ask me how we do the pop-up images on our site. Normally, I would say I’m made of awesome and did it myself, but this time I have to give full credit to the innovative Lokesh Dhakar. He created a wonderful script, called Lightbox2, that allows you to expand images without the pesky use of pop-up windows or having to leave your current page. One effect I like to use, especially for recipes, is the slideshow feature. By adding a simple tag between brackets you can allow the user to click through grouped images. Lokesh has a beautiful site with simple directions that anyone can understand. You can find out more about the script, and download, by clicking here.

I have also been asked how I create the borders around the thumbnail images. I basically add padding and borders to each image and add a class to the div containing my posts. Here’s the CSS code:

.entry img {
border-left: 1px solid #666;
border-top: 1px solid #666;
border-right: 1px solid #222;
border-bottom: 1px solid #222;
background-color: #333;
padding: 2px; }

Here is the HTML code:

<div class=”entry”>
<img src=”yourimage.jpg” />
</div class=”entry”>

I’d also like to note that my code is indented.. but for some reason, I can’t get that to work with wordpress.

From General

  1. It’s a very good-looking site, I must say. I could learn a thing or two from you guys.

    I like the row of “bronze” icons at the bottom. It’s a nice touch. :P

  2. Thank you!

  3. Lightbox is amazing. I use it sometimes on another blog site. Thanks for giving up your secret. :)

  4. Goblinkatie permalink

    You own! I’ve been wondering about this code. Thanks you so very much for sharing!

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS