Lightbox for Blogger/Blogspot Tutorial

Read updates below
If you have ever clicked on a picture on my blog you will notice they don't pop up in the normal way. I use lightbox v2 which was created by this guy. To make a long story short, it took a very long time for an idiot like myself to figure out how to make it work. I will try and give you some simplified steps so you can get it to work on your blogger blog. Wordpress and Typepad users you are on your own. For starters you will have to get into the HTML for both your blog template and posts. If you aren't comfortable with this, too bad.

Step 1
Before you do anything with your template html code you need to save a backup copy. (red circle 1). That way if you screw something up you can always start over. Next copy the following code and paste to your template html code (red circle 2) right before this crap (refer to 2nd picture below). Warning, if too many people use my code, and Google gets swamped and they kill my lightbox, I will modify my googlepages and you loose your lightbox also. Be ye warned! (with a pirate sounding voice). After adding the code save your template.

Step 2
Posting pictures. To start out I always shrink my pictures to 800 pixels. I use Picasa, they have a new version out that is cuter than the previous one. If you don't know how to do this, Google it. You can make the pictures larger but when they open in lightbox they will be huge and a big pain in the butt.

Upload your pictures like you normally do in blogger. These are the settings I normally use to upload pictures. After you get things arranged you will need to edit the post html.

After you get to the html editor I usually use the find and highlight feature in FireFox under edit and find. I search for "-h" and highlight all, then add the following code as shown below.

 rel="lightbox[add some words here]"

Here are some variations of the lightbox code. After you add the lightbox code you will need to remove the "-h" 's as this opens the picture in a new window. That "-h" thing only took me about 3 days to figure out. So after you remove all the -h's and add the code, you are ready to publish.


Final Thoughts
There are some drawbacks to using the code. If your blog page doesn't load completely before someone starts clicking on pictures, the script won't load right and the code won't work. That is why I have the loading page screen that pops up when you go to alaskamassey.
Feed readers also can't access the code. Well, I use Google reader and it won't pull the pictures up right. Some readers may work fine.
If the code won't work for you let me know. I will probably act confused and tell you to go and figure it out on your own. Enjoy. ~Erik

Update 10-25-08
There has been a request for a Preloading page. It has been a while since I have added this HTML to my page. Here is the code that needs to be added. The first portion goes at the top of your page, and the last section goes at the bottom of your HTML page. The easiest way to see where the code goes is to view the source code on this page (right click with FireFox, IE right click or go to view) . Hopefully this works. I changed the .gif file to be a bit more generic than the Alaska Massey logo.

As a side note I also opened a flickr account and am using that to host my pictures. It allows pictures to be viewed normally when accessing with a feed reader. The only downside is that after 200 pictures uploaded you have to upgrade to a pro account which is 50 bucks for 2 years. I guess if I get tired of paying all my archived pictures will be lost. Maybe flickr wasn't a good idea.... I have also heard that Google page creater will be shut down in a year or so which means I will have to transfer the lightbox script to a new host.

If you are able to get everything to work please leave a comment with a link to your site so others can see other working versions of lightbox. Good Luck. ~Erik

Update 12-18-08
Lightbox has been spotty the last few days due to an overusage of my google pages. Google has a bandwidth limit that has been exceeded so...I am in the process of finding some other place to host the lightbox script. If anyone knows a good spot to host let me know. Thanks.