Annotated Image (activity type)

Overview

This activity type can provide additional context to an image through the inclusion of ‘Look Closer’ buttons. Each ‘Look Closer’ button can display open to display rich text, an image gallery, or a video.

Features

Image

This activity type supports JPG and PNG image files.

Scale to Fit

The image can be scaled to fit the size of the window. This will use a CSS transform to the entire activity container, resulting in the Look Closer buttons scaling proportionally. ^{[illustration needed]}

Labels

There is a label button in the bottom left corner that can be opened to display a rich text description.

Look Closer Display Modes

Toggleable

The Look Closer buttons can be toggleable, allowing the visitor to show and hide the buttons to lessen visual clutter. ^{[illustration needed]}

Invisible

The Look Closer buttons can be made invisible, allowing the buttons to be integrated into the image. ^{[illustration needed]}

Static

The Look Closer buttons can be set to static, which will force all Look Closer buttons to appear as a magnifying glass icon of the same size, regardless of individual button configuration. ^{[illustration needed]}

Look Closer Buttons

Position

The position is set relative to the (x,y) coordinate of (0,0). The Look Closer buttons position is set from the top left corner.

Size

The size of the button can be set as a radius in pixels.

Icon

The icon of a button can be configured to create visual groups.

Title

The title of a button is visible when the visitor hovers over it, and when certain Look Closer Views are open.

Content

Each button can display either rich text, a gallery of images, or a video.

Examples

Virtual Birdwalk

This activity displays a illustrative representation of the ecosystems found within the Puget Sound area in Washington State. Each Look Closer button displays a gallery of birds that visitors could find there.

Urban Biome

This activity displays a illustrative representation of an hypothetical urban ecosystem around the Puget Sound area in Washington State. It is one of four like it that are used in a live facilitated activity where students create their own bird species. Each Look Closer button displays things to consider for a bird who may live there.

Northern Flicker Specimen

This activity displays a collections image of a Northern Flicker. Each Look Closer button opens additional photographs of the specimen from different angles. This activity is one of twelve like it that display specimen from the Slater Museum collection and was used as part of a live facilitated activity about creating scientific illustrations.

About

This activity type only utilizes code that was created specifically for CLIO.