Thumbnail Album with Lightbox Effects

In my previous article, we have learned how to create hyperlinks that point to images using lightbox effects as it allows you to load larger versions of images on the same page via a cool overlay window. The rest of the page is dimmed with a grayish transparency. Today, we will learn how to create a thumbnail album with lightbox effects as shown below.

If I click the first thumbnail in the blog post, it will then be displayed in the center of the window, as shown below:-

Login to your Dashboard> Layout> Edit Html. Copy here and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

Next, you need to copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.
<script src='http://onlinebiztutorials.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://onlinebiztutorials.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='http://onlinebiztutorials.googlepages.com/lightbox.js' type='text/javascript'/>
Save the template. (Note - If you have already installed the CSS code and the three scripts before, please skip ahead to post template.)

Click Settings> Formatting> Post Template. Add these lines into the post template box.
<TABLE><tbody><TR><TD><a href="images/image-1.jpg" rel="lightbox" title="my caption1"><img src="thumbnail1.jpg"/></a></TD><TD><a href="images/image-2.jpg" rel="lightbox" title="my caption2"><img src="thumbnail2.jpg"/></a></TD><TD><a href="images/image-3.jpg" rel="lightbox" title="my caption3"><img src="thumbnail3.jpg"/></a></TD><TD><a href="images/image-4.jpg" rel="lightbox" title="my caption4"><img src="thumbnail4.jpg"/></a></TD></TR></tbody></TABLE>
Example

Save settings. You'll notice that anything you type into the box of "Post Template" will appear in your new post. Change the color in red to suit your own preference before you publish your new post eg. your image reference url, your caption (text to be displayed) and your thumbnail image url. (Note - your total thumbnail album's width must not exceed your post container's width.)