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.
| Documentation | |
|---|---|
| Installation | Look and Feel |
| Interaction Modes | Developing Activity Types |
| Creating an Interactive | Framework |
| Integrating CLIO | Contribute |
