How To – Lightbox

Well well it may sound easy to implement the Lightbox photo album, but of course I think you all don’t mind some bits of the implementation details:

1. First, download the Lightbox Javascript, unzip it, upload to your server …
2. In the Lightbox /js/ directory, check the file lightbox.js, search the Configuration section. Ensure the paths to the two images are correct.
3. In the Lightbox /css/ directory, check the file lightbox.css, ensure the paths to the image files are correct.
4. Now back to the blog tool, find out the tiny-mce-xxx.js (xxx is your blog tool), probably in the js directory, and make sure the “a” element (i.e. the anchor tag) includes “rel” (i.e. the relationship attribute) in the line of extended_valid_elements. That change make the tinymce accepts “rel” in anchor tag (by default, tinymce will remove this attribute).
5. Then, amend the template of your blog (in my case, the header.template) to include the few script tags and link tag (as specified in the Lightbox help page). That change includes extra js files to your blog pages – i.e. it will essentially slow down all the pages … sorry.
6. Last step, create your blog post as usual, but don’t forget to include the “rel” attribute in the anchor tag, as in the Lightbox help page.

That’s it !!

Author: Michael Yung

Michael possessed over 30 years of experience in Information Technology with focuses on complex application development, database technologies and IT strategy. He also spent the last 20 years in Internet technology, eCommerce development / operations, web usability, computer security and Public Key Infrastructure technologies. View all posts by Michael Yung