8.13. Full Screen Image Tool

Note

EdX offers full support for this tool.

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.

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

Image of the full screen image tool with the Full Screen button.

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 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 of the Image Modal tool with the Full Screen button.

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