8.15. Full Screen Image Tool

Note

EdX offers full support for this tool.

Some large images are difficult for learners to view in the courseware. The full screen image tool allows learners to enlarge the image, so they can see all the detail in context.

8.15.1. The Learner View of a Full Screen Image

The learner sees the full screen image in a unit page. When the learner moves the cursor over the image, the Fullscreen option appears.

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

When the learner selects Fullscreen, the image opens and expands in the full browser window. Close, Zoom In, and Zoom Out options appear.

Image of the Image Modal tool with the Full Screen button.

The learner can then zoom in on the image, and drag the image to view a specific part of it.

Image of the Image Modal tool with the Full Screen button.

8.15.2. Create a Full Screen Image

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

  2. Under Add New Component, select HTML, and then select Full Screen Image Tool.

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

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

  5. Select HTML from the toolbar to edit the HTML source code.

  6. Scroll down in the file, and then 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 example.

    <h3>Sample Image Modal</h3>
    <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. Select Save.