View PDF files in a ShadowBox pop-up window in the Essential Theme on your Moodle 3.0 site (works on all other themes as well!)

Source: Jens Peter Olesen,
Pixabay, CC0 Public Domain

Design. It's all about design. Today's post is  a sequel to my earlier post on the same subject. In that post, I enabled my PDF and ODF files to open in a Lightbox-like window, when clicked upon, in three themes: Evolve-D, Academi and BCU. I had used FancyBox and ViewerJS to achieve this. I couldn't get Fancybox to work with other themes.

The great news is that I have since discovered that ShadowBox (in place of FancyBox) works on Essential and Moodle 3.2's Boost theme. The installation is much easier, and I managed to optimise the look and feel of ShadowBox by tweaking its original CSS file.

Important Disclaimer and warning:
If you find that your Moodle version and Moodle theme causes your PDF file to load v-e-r-y slowly, or if your Google Chrome displays the "Out of memory" or "Aw snap" message,  then try using the FancyBox method that I blogged here instead.

Learning Outcome
At the end of this post, you will be able to hack your beloved and sacred Moodle site so that PDF files will open as pop-ups. That's all. Nothing earth-shattering. However, I strongly believe that my post today is going to touch lives and make a difference in your Moodle experience (XP). As well as your teachers' and students' Moodle XP. Read on!

How to install the multi-platform PDF pop-up window on your Moodle 2.9.x/3.0 site.

Pop up! Source: Pixabay,
License: CC0 Public Domain;
See https://goo.gl/lAIF8x

Welcome to my Dummies' Guide for the Complete Dummy!

This guide will show you how to enable your Moodle 2.9 site so that if you click on a PDF file resource, a lighbox-like pop-up window will open. I made mention of this 'innovation' here.

A dumbed-down version of this guide is called the Idiot's Guide. But I haven't gotten down to doing it yet because I'm not a complete idiot. Yet.

Buy

I crafted this Guide because I am afraid that three months from now I might forget all the steps. Thus the Dummy is I. This guide is insanely populated with screenshots because it is a step-by-step guide for, like I said, Dummies.

A Dummies' Guide should be simple enough for any 'Dummy' to follow. All you need to do is to follow the steps and in the end you will be rewarded. I will hold your hand all the way through.

Learning Outcomes
At the end of this Guide, you will be able to

• install the PDF pop-up on your Moodle 2.9.x/3.0 site using one of these themes: evolve-D, BCU and Academi. Disclaimer: if you are using a different theme, I cannot guarantee that it work on your theme. I tried to get it to work on Essential, More and Clean themes. I failed. Maybe you can succeed where I failed.
• to experience the joy of seeing your students open up PDF files as a pop-up window on Moodle, on every platform and device known to man. After this you can sit back, relax and watch Netflix.

• to see a PDF, Text and ODF (Writer, Presentation, Calc) file open on multiple platforms in the same and consistent way. Check out the Slideshare presentation below. Drool.

Open and view a PDF file on a Moodle 2.9 coursepage inside a fully-featured pop-up window using Javascript. All without leaving the Moodle coursepage.

By Sean McEntee. Source: https://goo.gl/5vEpBI
Creative Commons License (Attribution 2.0 Generic (CC BY 2.0))

Hi All

1. Introduction

2. The Solution

I managed to make use of existing Javascript libraries to produce a PDF pop-up on my Moodle site. Here's what happens. I drag-and-drop a PDF file into my Moodle 2.9 coursepage. When I click on a PDF resource link, a fully-functioning pop-up window appears.

I've made it work on and for the following: iPad, PC, Android and Mac. I've tested it on IE, Firefox and Chrome. They all work.

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.