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