Enable the Lightbox effect for an image file inside a Folder resource on your Moodle site

Folders by Colleen  Galvin, on Flickr
Source; https://www.flickr.com/photos/col233/7974661195

I am having fun implementing the Lightbox javascript effects on images on my Moodle site. It was just yesterday that I realised that I could upload image files into a Moodle folder resource, but when I clicked on an image file, the file downloaded instead of loading up on-screen. It was then that I decided to see if I could make a clicked file link open up on-screen with the Lightbox effect. I am happy to say that I have succeeded to do so, albeit with a hack or two.

Here is my Moodle folder resource.

Figure 1. A normal-looking folder containing 2 image files, 1 text file and 1 Ms Word file.
Nothing out of the ordinary here....

Figure 2. What happens when the file itec2015-1.png is clicked.
Whoa! It's a lightbox image effect. Click the 'x' to close.

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.

How I created a rotating image slider for the Educator theme on my coursepage

I successfully created a rotating slider for my Moodle 2.5 site based on the excellent post by Gerrard Shaw on his blog: http://gshaw0.wordpress.com/2012/05/15/how-to-add-an-image-rotator-in-moodle-2-2/.

Rev up Moodle 2.3 and 2.4.1 usability with Davo Smith's "Drag and Drop Image into labels" improvement

On of the major weaknesses of Moodle over the past few years is usability and ease of use. Compared to what? Well, compared to Facebook or Google Plus. A major archilles heel of Moodle is the sheer number of mouse clicks you need to add an image to your course page. 14 steps to add an image? That's enough to put any harrassed teacher off Moodle initiation. But Moodle's really getting better, ever since Moodle 2.3 came out.
                    Today's post will introduce you to yet another improvement to core Moodle 2.x code that will make your life, as a course teacher, easier. If you liked Davo Smith's or Moodle 2.3's built-in drag and drop file upload, you will love his new, yet-to-be core Drag and Drop Image (DaDI) improvement update. It works on Moodle 2.3 and 2.4.1. I've installed the 5-file-patch on my Moodle 2.4.1 production site. And I'm loving it. It makes my Moodle course administration experience all-the-more enjoyable.

DaDi in action on my brand new Moodle 2.4.1 production site.

Figure 1. Dragging an image file to my coursepage,
Seconds after releasing the mouse button.