BF Stop 2

A few people have asked how to get the Lightbox Effect on images embedded in a standard article. You can see an example of it here on my blog and in the diagram below.

If you’re not comfortable writing a couple lines of HTML, this hack probably isn’t for you. But, hey, if you mess up, just delete the post.

Step 1: Resize Your Image

To get this working, you need to create 2 versions of the image you want to display. I generally create a small version that is 400 pixels wide and a large version that is about 900 pixels wide. See the diagram below. I usually name my images something silly_small.jpg and silly_large.jpg.

Step 2: Upload Your Images

Because this is going in a normal article post, the images need to be hosted elsewhere. If you have a BIG Folio site, you can simply upload them to your image bank. If you have a different type of site, you can simply upload them (via FTP) to any web-accessible folder. Something like “images” or “blog” would be a good idea.

Now, make sure you can see the images by typing their URL directly in a browser. If you have a BIG Folio site and uploaded them to your image bank, the images will be at:

http://www.mywebsite.com/gallery/silly_small.jpg

If you have a different type of site, they will be located on the domain and in the folder you placed them. Probably something like http://www.mywebsite.com/blog/silly_small.jpg

Step 3: Write Your Post

I like to write my blog posts in a text editor–then paste it into the blog admin when I’m ready. This gives me the chance to save it, proof-read it, and remove something stupid I’ve said before posting. If you’re more of a “from the hip” kind of blogger, go ahead and type write into the blog admin.

Step 4: Place the Image in the Post

Here’s the only tricky part. You need to put a line of HTML in your post (wherever you want the image displayed) that embeds your small image and links to the big one. Here’s what it looks like:

<a href="http://mywebsite.com/gallery/silly_large.jpg" rel="lightbox">
<img src="http://mywebsite.com/gallery/silly_small.jpg" border="0" alt="description" />
</a>

That’s it. You can just copy the above code, paste it into your post, change the ALT description, then make sure to change the URLs of the two images. The first URL (in the a tag) should point to the large version of your image. The second URL (in the img tag) should point to your small version. I added the ALT description because that’s a handy way to add some SEO goodness to your blog posts.

That should do it. Submit that post and test it out.

Good luck.