Enable the Lightbox effect for an image hyperlink in a Label resource on your Moodle site

Photo credit: Lightbox-1 via photopin (license)

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. The original JavaScript library was written by Lokesh Dhakar. The term Lightbox may also refer to other similar JavaScript libraries. Text is from: Lightbox (JavaScript) - Wikipedia, the free encyclopedia

In this post, I will show you how you can enable Lightbox for an image hyperlink in a Label resource on your Moodle site. The genesis of this post was the Blog Learning Rocks. Dan Roddy has written an average of one blog post a year for the last two years, and seven posts a year for the last six years. Which is not much, but this 2010 post of his has become my inspiration for today's post. In fact, thanks to Dan's post, I've also managed to enable the Lightbox effect on image files inside a Moodle folder resource! More on that later in another post on Moodurian.

Well, let's get started shall we?
Step 1: Surf to Dynamic Drive's Lightbox image viewer page.
Step 2: Download the file lightbox.zip
Step 3: Extract the contents of the lightbox.zip to your hard drive. You will see the folder named "lightbox" and its contents below:

Figure 1. Contents of lightbox.zip

• lightbox.js - the main script.
• lightbox.css - basic style and tricky PNG support.
• overlay.png - 80% opacity, black tile used to create shadow.
• loading.gif - mock status bar used in examples above.
• close.gif - 'X' graphic placed in top-right corner.

Step 4. FTP to your Moodle site and edit the file named /moodle/htdocs/theme/yourtheme/config.php

Step 5. Add the following yellow highlighted code to the file config.php:
$THEME->sheets = array('general','lightbox');

Step 6: Create a subfolder /moodle/htdocs/theme/yourtheme/lightbox

Step 7: Upload the image files close.gif,  loading.gif and overlay.png to your /moodle/htdocs/theme/yourtheme/lightbox subfolder.

Step 7: Upload the file lightbox.css to /moodle/htdocs/theme/yourtheme/css

Step 8: Edit the file /moodle/htdocs/theme/yourtheme/css/lightbox.css and add the following yellow highlighted code around lines 18 and 24:

#overlay{ background-image: url(http://www.domainname.com/moodle/theme/yourtheme/lightbox/overlay.png); }

...

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.domainname.com/moodle/theme/yourtheme/lightbox/overlay.png", sizingMethod="scale");
}


Step 9: Store (upload transfer) the file lightbox.css to the style subfolder of your theme

Step 10: Upload the file lightbox.js to  /moodle/htdocs/theme/yourtheme/javascript

Step 11: Edit the file /moodle/htdocs/theme/yourtheme/javascript/lightbox.js and add the following yellow highlighted code (around line 41 and 42):

var loadingImage = 'http://www.yourmoodlesite.com/moodle/theme/yourthemename/javascript/loading.gif';
var closeButton = ''http://www.yourmoodlesite.com/moodle/theme/yourthemename/javascript/close.gif'; 

Make sure you purge all caches before you start loading images. Below is the HTML code inside a Label resource.


<p><a rel="lightbox" href="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/F-16_June_2008.jpg/450px-F-16_June_2008.jpg">F16 Fighting Falcon</a></p>
<p><a rel="lightbox" href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/F-15E_Strike_Eagle.jpg/300px-F-15E_Strike_Eagle.jpg">F15 Eagle</a></p>
<p></p>
<p><a rel="lightbox" href="http://images.defensetech.org/wp-content/uploads/2012/09/F-15-490x326.jpg" title="Death from the skies"><img src="http://www.cambridgekidz.org/moodle/draftfile.php/5/user/draft/268098145/F15.PNG" width="227" height="139" alt="f15" /></a><br />Click me</p>

Figure 2. HTML source code of a Label resource

Figure 3. WYSIWYG view of the Label resource inside the HTML editor.

Figure 4. The Label consists of two hyperlinks and one image thumbnail.

Figure 5. The user has clicked the link "F16 Fighting Falcon"
Notice the overlay effect which highlights the foreground
pop-out imagewhile graying out the rest of the background.

Figure 5. User has clicked the "F15 Eagle" link

Figure 6. User has clicked the F15 image thumbnail. Note that the image has a title.

So there you have it. You can have fun hyper-linking images for the Lightbox effect.

Cheers
Frankie Kam

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!