From 5f07fc9df9e2063873f65ec14e0d8297cb27ca1e Mon Sep 17 00:00:00 2001 From: Sylvia Pearce Date: Fri, 17 Jan 2014 17:18:34 -0500 Subject: [PATCH] Update Zooming Image tool documentation --- docs/en_us/course_authors/source/tools.rst | 35 ++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/docs/en_us/course_authors/source/tools.rst b/docs/en_us/course_authors/source/tools.rst index 3f03db8347..e7b32b8bb5 100644 --- a/docs/en_us/course_authors/source/tools.rst +++ b/docs/en_us/course_authors/source/tools.rst @@ -281,13 +281,44 @@ biochemical reactions that cells carry out. .. image:: Images/Zooming_Image.gif :alt: Image of a zooming image +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. + 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`. + #. Under **Add New Component**, click **html**, and then click **Zooming Image**. -#. In the empty component that appears, click **Edit**. +#. In the new component that appears, click **Edit**. -#. When the component editor opens, replace the example content with your own content. +#. In the component editor, 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 #. Click **Save** to save the HTML component. + + + + + + + + + + + + + + + +