You may want to present information to your students as an image. If your image is very large or very detailed, students may not be able to see all the information in the image. You can use the zooming image tool to enlarge areas of your image as the student moves the mouse over the image, as in the example below.
To create a zooming image tool, you need the following files.
Upload your regular-sized image file, your small image file, and the jquery.loupeAndLightbox.js file to the Files & Uploads page. For more information about how to do this, see Adding Files to a Course.
Under Add New Component, click html, and then click Zooming Image.
In the new component that appears, click Edit.
In the component editor, replace the default problem text with your own text.
Switch to the HTML tab.
Replace the following placeholders with your own content.
Replace the following file name and path with the name and path of the image that you want to appear magnified when the user hovers over the regular image.
For example, your file name and path may be /static/Image1.jpg.
Replace the following file name and path with the name and path of the image that you want to appear when the page opens.
For example, your file name and path may be /static/Image2.jpg.
Because you uploaded the jquery.loupeAndLightbox.js file to the Files & Uploads page, your file name and path is /static/jquery.loupeAndLightbox.js.
(Optional) If you want the magnified area to be larger or smaller, change the width and height values from 350 to larger or smaller numbers. For example, you can change both numbers to 450. Or, if you want a horizontal oval instead of a circle, you can change the width value to a number such as 500 and the height value to a number such as 150.
The HTML in your zooming image tool may resemble the following.
Click Save to save the HTML component.