Update zooming image tool info and add image

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 <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.
+
+     **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
 
 
 
+
+