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 !!

Advertisements

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.

2 thoughts on “How To – Lightbox”

  1. may sound stupid but could you make the install part a little bit easier for those who are not good in english ? maybe with some pictures OR better show the codes with you have edit.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s