Tuesday, July 20, 2010

How to create a lightbox in Moodle

A lightbox effect is a great way to improve how pictures are displayed within Moodle, especially in fixed width themes where the space may be at a premium. I use it to zoom in on thumbnail images, but you can also use it to display images from a link on a word too if you like. It uses a nice "modal zoom" look and feel that fades the background and will be familiar to anyone who uses the web more than infrequently.

This hack requires a small change to some HTML, but this is only to insert new code - there aren't any actual changes - so it should be considered an intermediate level tweak. As this is a hack, I add it to my own folder of hacks that I create in Moodle for just such a circumstance.

The lightbox effect is a Javascript feature adopted from Dynamic Drive.

The process of adding this effect is quite simple.
  1. Download the lightbox.zip from the Dynamic Drive website. This contains the 5 files you need.
  2. Create a folder in the Moodle folder called “hacks” and copy the unzipped lightbox folder in to it, so:
  3. Paste the code for the javascript in to the header.html file for each theme that will use the effect, in the header section, directly before the closing header tag.
  4. Tweak the inserted code slightly to give the correct path to the files. You need to change the file location from:
  5. You'll also need to repeat this link change for the lightbox.js file in the second line of that javascript snippet.
Save your changes to the file and now you are nearly ready to go. This should ensure that a) the javascript is enabled across the site b) is in one location for working with.

You simply choose what you want to link from, either text or image, then turn it in to a link, linking to the fullsize image you want. In my case, I insert a large image, but use the Moodle "Insert picture" dialogue to restrain its size as it appears within the img tag, then create the link pointing to the same picture on its own.

So far, so good. The magic happens when you add the following attribute to your link element:

Then save all the changes and have a look at your webpage. Click on the image and you get the lightbox appear. Click it again to remove it. Sweet

In summary: add files, tweak theme's header code, add a link to your big image, include rel attribute in link.

Now, I'm sure that someone else somewhere else has already done this for Moodle, or something very similar, but I couldn't find it. I'm also sure that it can be done in such a way that it can be inserted to the course just once, instead of in each theme, but I'm new to tweaking Moodle in such a way, so I'll explore that later and let you know how I get on.