@@ -94,7 +94,7 @@ Step 1. Add LTI to the Advanced Modules Policy Key
not the period.
.. image:: Images/LTI_Policy_Key.gif
:alt: Image of the advanced_modules key in the Advanced Settings page, with the lti value added
:alt: Image of the advanced_modules key in the Advanced Settings page, with the LTI value added
**Note** If the **Policy Value** field already contains text, place your
cursor directly after the closing quotation mark for the final item, and
...
...
@@ -271,39 +271,59 @@ For more information, see `Xml Format of "Word Cloud" Module
Zooming Image Tool
******************
Some edX courses use extremely large, extremely detailed graphics. To make it
easier to understand we can offer two versions of those graphics, with the zoomed
section showing when you click on the main view.
The example below is from 7.00x: Introduction to Biology and shows a subset of the
biochemical reactions that cells carry out.
You may want to present information to your students as a graphic. If your graphic is very large or very detailed, students may not be able to see all the information in the graphic. You can use the zooming image tool
.. image:: Images/Zooming_Image.gif
:alt: Image of a zooming image
:alt: Example zooming image tool showing a chemistry exercise
Components of a Zooming Image Tool
----------------------------------
To create a zooming image tool, you need the following files.
* A regular-sized image. This is the image that appears in the LMS by default.
* A smaller image. This is the image that appears zoomed when a student clicks the regular image.
* The jquery.loupeAndLightbox.js file. Every zooming image tool uses this JavaScript file. You can download this file on the `GitHub loupeAndLightbox <https://github.com/mdbiscan/loupeAndLightbox>`_ page. You won't make any changes to this file.
* The image that you want students to see when they access the unit.
* The image that appears in the magnified area when a student clicks the regular image. This image may be larger than the regular image.
* The **jquery.loupeAndLightbox.js** file. Every zooming image tool uses this JavaScript file. You can download this file on the `GitHub loupeAndLightbox <https://github.com/mdbiscan/loupeAndLightbox>`_ page. You won't make any changes to this file.
Create a Zooming Image Tool
---------------------------
#. Upload both image files and the jquery.loupeAndLightbox.js file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
#. 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 :ref:`Add 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, switch to the **HTML** tab.
#. 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 first file name and path (**https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png**) with
* 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.
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.
