Adno views tags
Adno is a web application for viewing, editing and sharing narratives and journeys on online images, static images and IIIF images.
An Adno project is simply a json file in W3C Web Annotation model format. It can therefore be processed by Adno and by any other compatible software. Adno views tags allows you to embed different types of visualization in your web pages.
Warning: This script only works with Adno projects based on IIIF resources.
Example:
<div data-adno="slider"
data-src="https://static.emf.fr/adno/embed/annotations.json"
data-width="800px";
></div>See this demo or index.html page of this repo.
For minimal installation, insert just before the closing tag </body> of your page:
<script src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="adno-display-tags.js"></script>You can also add Classless or Bootstrap CSS framewok for a more attractive layout and to access some options.
<link rel="stylesheet" href="https://classless.de/classless-tiny.css">If you want to use the slider, you have to add the following line:
<script src="jquery.shortslider.min.js" defer></script>If you want the power of Annona then you need to add:
<script src="https://ncsu-libraries.github.io/annona/dist/annona.js" defer></script>and the stylesheet link preferably in the header, before the closing tag </head>, but you can also insert it in the body, after the <body> tag (not recommended).
<link rel="stylesheet" type="text/css" href="https://ncsu-libraries.github.io/annona/dist/annona.css">Dependencies:
- jQuery
- Classless for better rendering, optional.
- Short slider for slider tag only, optional.
- Annona Library for annona tag only, optional.
Display the project metadata.
| Attribute | Description | Default |
|---|---|---|
| data-adno | value: infos |
|
| data-src | project url | |
| data-title-level | level of the title h1 ... h3 | h3 |
Only data-adno and data-src are mandatory.
Display in list of images of annotated areas and annotations in captions.
| Attribute | Description | Default |
|---|---|---|
| data-adno | value: list |
|
| data-src | project url | |
| data-image-max-width | maximum image width (in pixels) | 600px |
| data-image-max-height | maximum image height (in pixels) | 600px |
| data-caption-position | value: top, right, bottom, left, none |
bottom |
Only data-adno and data-src are mandatory.
data-caption-position depends of CSS framework, works fine with Classless.
Display as a slideshow.
| Attribute | Description | Default |
|---|---|---|
| data-adno | value: slider |
|
| data-src | project url | |
| data-style | presentation style: normal, carousel ou fade` |
normal |
| data-width | width of slider (in pixels) | 800px |
| data-text-width | width of text (in pixels) | 600px |
Only data-adno and data-src are mandatory.
Insertion of the Adno player.
| Attribute | Description | Default |
|---|---|---|
| data-adno | value: embed |
|
| data-src | project url | |
| data-width | width of the embed (in percentage or pixels) | 100% |
| data-height | height of the embed (in pixels) | 600px |
| data-fullscreen | allow fullscreen true or false |
true |
| data-delay | min = 1 and max = 20 (seconds) | |
| data-navigator | true or false |
|
| data-toolbarsfs | true or false |
|
| data-startfirst | true or false |
|
| data-rotation | true or false |
|
| data-toolbar | true or false |
|
| data-bounds | true or false |
Only data-adno and data-src are mandatory.
Adno directly provides a procedure to generate an iframe without using Adno views tags.
<iframe
src="https://w.adno.app/#/embed?url=URL OF ADNO PROJECT HERE"
height="600px"
width="100%"
allow="fullscreen"
></iframe>
Using the Annona library.
| Attribute | Description | Default |
|---|---|---|
| data-adno | value: annona |
|
| data-src | project url | |
| data-infos | inject project infos in Annona viewer (buttom i) |
|
| data-option-* | wildcard * is an option of Annona |
Cf. Annona settings |
Only data-adno and data-src are mandatory.
Beware: specific Annona options data-option-* have not been extensively tested.
The html produced is generic. So, you can style it by adding a style tag or a link to a custom stylesheet in the header.
You can use a lightweight css library, Classless or Chota for example, or also Bootstrap as a base and override it with your own styles.
- adno.app
- this hack is inspired by Annona Library.