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 process of adding this effect is quite simple.
- Download the lightbox.zip from the Dynamic Drive website. This contains the 5 files you need.
- Create a folder in the Moodle folder called “hacks” and copy the unzipped lightbox folder in to it, so:
- Tweak the inserted code slightly to give the correct path to the files. You need to change the file location from:
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.