diff --git a/docs/en_us/course_authors/source/Images/ZoomingImage_Modified.gif b/docs/en_us/course_authors/source/Images/ZoomingImage_Modified.gif new file mode 100644 index 0000000000..9c7dc3bf77 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/ZoomingImage_Modified.gif differ diff --git a/docs/en_us/course_authors/source/tools.rst b/docs/en_us/course_authors/source/tools.rst index e7b32b8bb5..462365ae18 100644 --- a/docs/en_us/course_authors/source/tools.rst +++ b/docs/en_us/course_authors/source/tools.rst @@ -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 `_ 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 `_ 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. + + **https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png** + + 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. + + **https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png** + + For example, your file name and path may be **/static/Image2.jpg**. + + * Replace the following name and file path with the name and path of the JavaScript file for your course. + + **https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js** + + 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. + + .. image:: Images/ZoomingImage_Modified.gif + :alt: Example HTML for a zooming image tool #. Click **Save** to save the HTML component. @@ -322,3 +342,5 @@ Create a Zooming Image Tool + +