Lightbox2 in Movable Type 4

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It allows the reader to open a full-size image from a thumbnail, without navigating away from the page.

The one thing that I really liked about Word Press was the very nice Lightbox2 plugin. Unfortunately, I could not found Lighbox2 plugin for Movable Type. We need to install it "manually" into our Movable Type.

Installing Lightbox2 in Movable Type 4

Here is how to install Lightbox2 in Movable Type 4:
  • First, you need to download Lightbox2 javascript file.
  • Extract this file into your local PC.
  • Create a new folder, eg. lightbox, in your web site's root.
  • Upload all files to lightbox folder.

Tweaking Lightbox2 in Movable Type 4

After uploaded all files you need to edit your template to make Lightbox2 works on your Movabel Type. You will need to include these three Javascript files in your header (in this order). To do this, open head template and insert this following code: 
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTBlogURL$>lightbox/js/lightbox.js"></script>
Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). You can add this following code under the javascripts code above. 
<link rel="stylesheet" href="<$MTBlogURL$>lightbox/css/lightbox.css" type="text/css" media="screen" />
Once this was corrected, you need to make sure the referenced image files are in the right location. You need to open and edit lightbox.js file with this following code: 
var fileLoadingImage = "/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "/lightbox/images/closelabel.gif";

Once all of this was done, You finally got the results You was looking for ;) Gud lak!

July 25, 2007 No Comments Movable , Tutorial

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

« Google Sitemaps for Movable Type | Home | Paypal Indonesia Available to Add Funds »

 

Featured Sites

Archives


Categories

Subscribe

Sign up to receive the latest entry, as well as all of your other favorite entries!