8.11. Full Screen Image Tool¶

8.11.1. 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 Fullscreen button appears:

When the student clicks Fullscreen, the image opens and expands in the full browser window. The buttons Close, Zoom In, and Zoom Out appear:

The student can then zoom in on the image, and drag the image to view the desired part of it:

8.11.2. Create a Full Screen Image¶

1. Upload your image file to the Files & Uploads page. For more information about how to do this, see Adding Files to a Course.

2. Under Add New Component, click html, and then click Full Screen Image.

3. In the new component that appears, click Edit.

4. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.

5. Switch to the HTML tab.

6. 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. Your sample code should look like the following:

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

7. Click Save to save the HTML component.