Use Lightbox in Brightspace courses

About this article

This article describes how to integrate Lightbox 2.51 into a Brightspace course. It is intended for instructors who are familiar with Brightspace and are looking for a way to manage images in Brightspace content.

Why use Lightbox in D2L?

Lightbox is a popular method for providing users with access to full, high-resolution images and image galleries via a small thumbnail that does not take up a lot of space on a web page (examples). Selecting the thumbnail image causes the the larger image to appear, as if layered on top of the page, with the underlying page shaded. Users can then review the large images, close them, and go back to the original page of content. Here are some possible applications of Lightbox in D2L courses:

Cleaning up an image-heavy course page rather than having to position numerous images in text.
Creating image galleries on course pages that can be accessed via a single thumbnail image.
Adding a large, high-resolution image to a quiz question.

Steps

Download and modify Lightbox files

Download the most recent version of Lightbox. This will download as a zip file.
Open up the zip package and edit the following two files: css\lightbox.css and js\lightbox.js.
In lightbox.css, change the path to the directory where prev.png and next.png are stored by adding lightbox/ as illustrated below:

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../lightbox/images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../lightbox/images/next.png) right 48% no-repeat;
}

In lightbox.js, change the path to the directory where loading.gif and close.png are stored by adding lightbox as illustrated below:

(function() {
  var $, Lightbox, LightboxOptions;

  $ = jQuery;

  LightboxOptions = (function() {

    function LightboxOptions() {
      this.fileLoadingImage = 'lightbox/images/loading.gif';
      this.fileCloseImage = 'lightbox/images/close.png';

Save these files and update your zip package. Note that this modified zip package can be uploaded to multiple D2L courses. You won't need to change these files again until you decide to upgrade Lightbox to a new version.
Open up your D2L course and go to Manage Files.
Upload the zip file to your course root folder and unzip it. This will create a folder called lightbox. Delete the original zip file.

Upload an image and thumbnail

Use your favorite image editor to create a full and thumbnail version of the image you want to lightbox. Upload both files to your D2L course via the Manage Files feature. Your lightbox folder includes an images subfolder. You can upload your images to this folder or to any other folder in your course. Just remember where you put them!

Lightbox a single image using the D2L HTML Editor Tool

You can add lightbox functionality to any thumbnail image added via the HTML Editor Tool. It requires editing the HTML source code.

Open the page in edit mode in the HTML Editor Tool
Select the Edit HTML Source icon to switch from WYSIWYG to code view.
Add the following lines of code between the head tags:

<script src="lightbox/js/jquery-1.7.2.min.js"></script>
<script src="lightbox/js/lightbox.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet"/>

Update and Save the page. D2L will resolve the paths automatically, adding the path to your course's content directory. For example, the first line will look something like this:

<script src="/content/enforced/1078575-TLT2010/lightbox/js/jquery-1.7.2.min.js"></script>

Reopen the page in Edit view. From the WYSIWYG view, insert the thumbnail image in the desired location using the Insert an image button on the toolbar.
Select the Edit HTML Source icon to switch to code view. Edit the <a> tag such that it looks something like the example below. Note that the src is the thumbnail and the href is the full version of the image. The title is optional. Delete it if you don't want a caption.

<a href="/content/2013/2010935-TLT00000043/images/20120913_062957.jpg" rel="lightbox"
title="my caption"><img src="/content/2013/2010935-TLT00000043/images/thumb_20120913_062957.jpg" /></a>

Catagory:Brightspace