Installed Lightbox 2.02

Lately, I have been seeing all those cool effects on other people's blog that shade the entire web page in dark grey while the picture that the visitor just clicked is displayed prominently in the middle. Not only is that really cool, it's pretty useful as well especially if you just want to view a larger image without leaving the page. In other words, I think it is efficient use of screen estate.

Also, I just realized that Typo 4 actually ships with a version 1.0 of Lightbox. The effects are simpler as compared to version 2.02. You can get a nice preview of it here. So, here are the steps I took to upgrade Lightbox.

1. Grab the latest version of Lightbox from here.
2. Unzip the file to get all the good stuff.
3. FTP/SFTP to your Typo 4 blog and navigate to your /public folder. Replace the lightbox.js file in /public/javascripts with the one you just downloaded. Do the same for the lightbox.css file in /public/stylesheets
4. Also, upload the images found in the folder you just unzipped to /public/images. You need to upload all the images except image-1.jpg and thumb-1.jpg.
5. Navigate to /themes/<your theme >/layouts. Modify default.rhtml so that you includes the following 4 lines (if they are not there already)
   <%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "scriptaculous" %>
<%= javascript_include_tag "lightbox" %>
<%= stylesheet_link_tag "/stylesheets/lightbox.css" %>

As an added bonus, you can also use the built-in filter for Typo to quickly generate the html to overlay the image. This is the easiest way to try out Lightbox. Here is a sample that loads an image from Flickr. The magic number is the UID for the picture on Flickr.
<typo:lightbox img="201524385" thumbsize="medium" displaysize="original" alt="Jacking up the car" />
Just a quick reminder. If you do not have a Flickr Pro account, you should not set the displaysize parameter above to "original" since you do not have that feature. Instead set it to "large" or something else.

For more help, refer to the documentation at http://< your blog >/admin/textfilters/macro_help/lightbox

Right now, if you click on any of the images on this main page you will be able to see the effects. I am not going to update the previous images I have posted since that will take too much time.