Improved Moodle Navigation

Small Hack: Lightbox, Light Box, Multimedia Box or Shadowbox

Type:Small Hack

Requires: Any version of Moodle
Status: Contributed
Maintainer(s):

Improved Moodle Navigation
Kevin Brake
eLearningShow.com

One of the challenges my colleagues have faced when working with Moodle is navigation.  Often, end users comment about getting lost during the completion of questionnaires, surveys or other activities.We have solved this issue by providing end users with the opportunity to view content in a stand-alone popup window.  Unlike traditional popup windows, this popup window fades the background of your current page and displays the current active topic in the foreground of the web browser.

This solves the problem of users being lost in an interface that has too many options and losing the point of the training session.

My colleagues and I are very excited about the possibilities of using this functionally and we are eager to share how you too can set up your Moodle to use Lightboxes!

How to install

Step 1:  Download a Javascript Package

a)      For example http://www.shadowbox-js.com/download.html or download – moodle_shadowbox_install.zip

Step 2:  Unzip the Javascript Package to your local computer

Step 3:  Login to your moodle server

Step 4:  Browse to /moodle/theme/your_theme

Step 5:  Upload the contents of the Javascript Package

Step 6:  Edit the header.html and place this code above the </head> tag

<?php //Start Shadowbox code ?>

<link rel=”stylesheet” type=”text/css” href=”<?php echo $CFG->themewww .’/’. current_theme() ?>/shadowbox/shadowbox.css”>
<script type=”text/javascript” src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/shadowbox/shadowbox.js”></script>
<script type=”text/javascript”>
Shadowbox.init();
</script>

<?php //End Shadowbox code ?>

Congratulations your Moodle Server is now ready to use the Shadowbox Feature.

How to use

Step 1:  Setting up your link

Go into the source code view of the Moodle Textarea and add rel=”shadowbox[]” as follows:

<a href=”http://www.myurl.com&#8221; rel=”shadowbox[]”>mylink</a>

Step 2:  Testing your link

Save the changes and test your link.  …and that is it!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s