3. Sharing and embedding your images
<script src="https://b.micr.io/micrio-2.5.min.js"></script>
3.1. Using the Micr.io viewer
3.1.1. Sharing on social media
If you want to share an image, use the sharing icons in the top right corner of the viewer or copy and paste the public image URL (for instance https://micr.io/i/oJeaF) in your message.
3.1.2. Sharing image details
If you want to share a particular part of your image, open the image (like https://micr.io/i/oJeaF) and zoom in to the part of the image you want to share. If you look at the image address, you'll see it will look something like https://micr.io/i/oJeaF/_3363-_7544-_4415-_8378. You can instantly share it to other people or using social media, and they will see the exact details you are currently seeing.
3.2. Embedding images on your own website
There is also a step by step tutorial on this subject!
3.2.1. Using an <iframe>
This is the easiest way to embed an image in your page.
<iframe src="https://micr.io/i/oJeaF/" width="600" height="400" allowfullscreen></iframe>Results in this:
This is the easiest way to do it and works best for single images.
3.2.2. Using a custom <micr-io>
element
For more control over the image, and to add custom CSS, you can embed Micrio images
directly into your website. This is as easy as using <micr-io>
tags.
Include the Javascript and CSS references to the Micrio client library in your HTML
<head>
:
<script src="//b.micr.io/micrio-2.5.min.js"></script>
Then, you can simply add custom <micr-io id="[image ID]">
elements
in your HTML, which will be automatically loaded:
<micr-io id="oJeaF"></micr-io>Result (fully zoomable):
You can simply style the <micr-io>
elements using CSS to set the
desired width and height.
3.2.2.1. Custom options for <micr-io>
elements
You can specify additional options as attributes using the <micr-io>
element.
Attribute | Default value | Description |
---|---|---|
audio |
true |
If set to false , any image audio will be hard disabled |
camspeed |
1 |
Set the speed factor for camera animations |
events |
true |
If set to false , no event handlers will be set up and the
image will be non-interactive |
fullscreen |
false |
If set to true , a fullscreen toggle button will be shown |
keys |
false |
If set to true , you can use your keyboard to navigate through
the image |
lazyload |
false |
Set this to true to only start loading the image when it's been scrolled
into the user's view, in case it's lower in a webpage. |
loaderbar |
true |
If set to false , the loaderbar at the top will not be placed |
minimap |
false |
If set to true , an interactive minimap will be shown |
minimap-autohide |
true |
If set to false , the minimap will always be visible |
minimap-height |
160 |
Set the minimap height in pixels |
minimap-width |
200 |
Set the minimap width in pixels |
musicvolume |
1 |
If music was added to the image, play it at this volume (between 0
and 1 ) |
mutedv |
|
If this attribute is present, all audio will be disabled |
mutedvolume |
0 |
If music was added to the image, fade it to this volume while other audio plays
(between 0 and 1 ) |
static |
false |
Simulate an <img/> element. No logo, loaderbar, and no event
listeners |
two-finger-pan |
false |
Requires the user to use two fingers to pan the image on touch devices |
view |
0,0,1,1 |
Set the initial viewport rectangle of the image (x0, y0, x1, y1
with coordinates as fractions) |
vr |
false |
If set to true , a VR toggle button will be shown on 360°
images on VR compatible devices |
zoomlimit |
1 |
Set this to the percentage (1=100%) of how far a user can zoom in to the image |
// Show an image starting at the specified viewport using a minimap <micr-io id="oJeaF" view=".5711,.6859,.5929,.7030" minimap></micr-io>Results in:
3.2.3. Using Javascript
For more control over the images and for advanced use (webapps, single page interfaces), you can create and control Micrio instances using Javascript.
let image = new Micrio({ // Image ID, required id: 'oJeaF', //// Optional settings // HTML element to put the image in, defaults to <body> container: document.getElementById('container'), // Listen to touch and mouse events, defaults to true hookEvents: true, // Initializes and draws image on instance creation, defaults to true autoInit: true, // Creates a fully interactive minimap, defaults to false minimap: false, // How to render the initial view, like CSS background-size // 'cover' or 'contain'. Defaults to 'contain'. initType: 'contain', // Opens the image at a specified view rectangle [x0, y0, x1, y1] startView: [.25,.25,.75,.75] });
You then have an image
object which you can easily place and show with
image.show()
, and remove using image.hide()
.
More uses and advanced methods are described in the next chapter.
3.2.4. IIIF
Micrio is fully IIIF (International Image Interoperability Framework) compatible, both as image server and image client viewer. You can use any IIIF-compatible image viewer (as listed here) to view images uploaded in Micrio.
For now, please refer to the IIIF details page which contains examples.