Commit bfc6dd74 by Sylvia Pearce

Update Zooming Image doc to reference file on files.edx.org

parent 8ff3b4e5
......@@ -12,14 +12,72 @@ Overview of Tools in Studio
In addition to text, images, and different types of problems, Studio allows you
to add customized learning tools such as word clouds to your course.
- :ref:`LTI Component`: LTI components allow you to add an external learning application
or textbook to Studio.
- :ref:`Word Cloud`: Word clouds arrange text that students enter - for example, in
response to a question - into a colorful graphic that students can see.
- :ref:`Zooming image`: Zooming images allow you to enlarge sections of an image so
that students can see the section in detail.
- :ref:`Full Screen Image`: The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged.
- :ref:`LTI Component`: LTI components allow you to add an external learning application or textbook to Studio.
- :ref:`Word Cloud`: Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see.
- :ref:`Zooming image`: Zooming images allow you to enlarge sections of an image so that students can see the section in detail.
.. _Full Screen Image:
******************
Full Screen Image
******************
Some large images are difficult for students to view in the courseware. The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
The Student View of an Full Screen Image
-----------------------------------------
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **FULL SCREEN** button is shown:
.. image:: Images/image-modal.png
:alt: Image the the full screen image tool with the Full Screen button.
When the student clicks **FULL SCREEN**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** are shown:
.. image:: Images/image-modal-window.png
:alt: Image the the Image Modal tool with the Full Screen button.
The student can then zoom in on the image, and drag the image to view the desired part of it:
.. image:: Images/image-modeal-zoomed.png
:alt: Image the the Image Modal tool with the Full Screen button.
Create a Full Screen Image
---------------------------
#. Upload your image 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 **Full Screen Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
* Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
**<a href="/static/Image1.jpg" class="modal-content">**
* Replace the value of the <img> element's src attribute with the path to your image. For example:
**<img alt="Full screen image" src="/static/Image1.jpg"/>**
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. You sample code should look like the following:
.. code-block:: xml
<h2>Sample Image Modal</h2>
<a href="/static/Image1.jpg" class="modal-content">
<img alt="Full screen image" src="/static/Image1.jpg"/>
</a>
.. note:: You can use this same HTML code in any HTML component, not just those components you created as full screen images.
#. Click **Save** to save the HTML component.
.. _LTI Component:
......@@ -284,7 +342,7 @@ To create a zooming image tool, you need the following files.
* 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.
* The **jquery.loupeAndLightbox.js** JavaScript file. Every zooming image tool uses this JavaScript file, and you won't make any changes to it. `To download this file, right-click here <http://files.edx.org/jquery.loupeAndLightbox.js>`_, and then click *Save Link As* to save the file on your computer.
Create a Zooming Image Tool
---------------------------
......@@ -305,13 +363,13 @@ Create a Zooming Image Tool
**https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png**
For example, your file name and path may be **/static/Image1.jpg**.
For example, your file name and path may be **/static/Image1.png**.
* 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**.
For example, your file name and path may be **/static/Image2.png**.
* Replace the following name and file path with the name and path of the JavaScript file for your course.
......@@ -328,64 +386,4 @@ Create a Zooming Image Tool
#. Click **Save** to save the HTML component.
.. _Full Screen Image:
******************
Full Screen Image
******************
Some large images are difficult for students to view in the courseware. The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
The Student View of an Full Screen Image
-----------------------------------------
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **FULL SCREEN** button is shown:
.. image:: Images/image-modal.png
:alt: Image the the full screen image tool with the Full Screen button.
When the student clicks **FULL SCREEN**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** are shown:
.. image:: Images/image-modal-window.png
:alt: Image the the Image Modal tool with the Full Screen button.
The student can then zoom in on the image, and drag the image to view the desired part of it:
.. image:: Images/image-modeal-zoomed.png
:alt: Image the the Image Modal tool with the Full Screen button.
Create a Full Screen Image
---------------------------
#. Upload your image 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 **Full Screen Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
* Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
**<a href="/static/Image1.jpg" class="modal-content">**
* Replace the value of the <img> element's src attribute with the path to your image. For example:
**<img alt="Full screen image" src="/static/Image1.jpg"/>**
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. You sample code should look like the following:
.. code-block:: xml
<h2>Sample Image Modal</h2>
<a href="/static/Image1.jpg" class="modal-content">
<img alt="Full screen image" src="/static/Image1.jpg"/>
</a>
.. note:: You can use this same HTML code in any HTML component, not just those components you created as full screen images.
#. Click **Save** to save the HTML component.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment