Skip to content
Snippets Groups Projects
Commit 6c9972fa authored by Sylvia Pearce's avatar Sylvia Pearce
Browse files

Typo corrections

parent bfc6dd74
No related branches found
No related tags found
No related merge requests found
......@@ -25,22 +25,22 @@ 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 View of a 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:
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **Fullscreen** button appears:
.. image:: Images/image-modal.png
:alt: Image the the full screen image tool with the Full Screen button.
:alt: Image of 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:
When the student clicks **Fullscreen**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** appear:
.. image:: Images/image-modal-window.png
:alt: Image the the Image Modal tool with the Full Screen button.
:alt: Image of 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.
:alt: Image of the Image Modal tool with the Full Screen button.
Create a Full Screen Image
......@@ -66,7 +66,7 @@ Create a Full Screen Image
**<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:
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. Your sample code should look like the following:
.. code-block:: xml
......@@ -342,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** 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.
* 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
---------------------------
......@@ -359,25 +359,25 @@ Create a Zooming Image Tool
#. Replace the following placeholders with your own content.
* 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.
- 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.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.
- 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.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.
- 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.
- (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.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment