Menu

3. Sharing and embedding your images

This page explains how you can share and embed your images into your own website.
The current latest version of the Micrio client is 3.3: 
<script src="https://b.micr.io/micrio-3.3.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/LmnFB) 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/LmnFB) 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/LmnFB/_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

If you are a developer working with high resolution images, or if you have your own website where you would like to show your work in its full glory, Micrio supports several ways of embedding your images in your own site.

There is also a step by step tutorial on this subject!

3.2.1. Using an <iframe>

This is the most basic way to embed an image in your page, and works just like embedding any other web resource.

Copying and pasting this HTML-fragment in your HTML: 
<iframe src="https://micr.io/i/LmnFB/" width="600" height="400" allow="autoplay; fullscreen"></iframe>
Results in this:

This is a simple way to immediately have results without any custom includes in your site. However, if you have multiple images or want more control over the image or the styling, see the next section.

3.2.2. Using the <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 reference to the Micrio client library in your HTML <head>: 

<script src="https://b.micr.io/micrio-3.3.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="LmnFB"></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 Type Default value Description

General settings
lang string en The data language code to use
path string //b.micr.io/ For custom hosted Micrio images, specify the root URL like this
inittype string - Set this to cover to start the image using the full viewport
lazyload boolean 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.
static boolean false Simulate an <img/> element. No logo, loaderbar, and no event listeners

Camera controls
camspeed number 1 Set the speed factor for camera animations
zoomlimit number 1 Set this to the percentage (1=100%) of how far a user can zoom in to the image
elasticity number 1 The camera kinetic elasticity factor
view Array<number> 0,0,1,1 Set the initial viewport rectangle of the image (x0, y0, x1, y1 with coordinates as fractions)

User input
events boolean true If set to false, no event handlers will be set up and the image will be non-interactive
keys boolean false If set to true, you can use your keyboard to navigate through the image
pinch-zoom boolean true Use trackpad/touchscreen pinching for zooming
scroll-zoom boolean true Use mousewheel/trackpad scrolling for zooming
control-zoom boolean false The user must press CTRL/CMD when zooming with the mousewheel
two-finger-pan boolean false Requires the user to use two fingers to pan the image on touch devices
zooming boolean true If set to false the user cannot zoom at all
dragging boolean true Use dragging and touch events for panning

User interface
ui boolean true When set to false, no HTML UI elements will be printed
controls boolean true When set to false, no control buttons will be printed
fullscreen boolean true Show a fullscreen switching buttons on platforms that support it
social boolean false Show a social sharing link menu
toolbar boolean true When set to false, no top menu bar will be printed
scaler boolean true When set to false, no scaling element will be printed (only available when an object's physical size is known)
show-info boolean false Show an image info panel with the title and description
minimap boolean false If set to true, an interactive minimap will be shown
minimap-hide boolean true If set to false, the minimap will always be visible
minimap-height number 160 Set the minimap height in pixels
minimap-width number 200 Set the minimap width in pixels

Audio
muted boolean If this attribute is present, all audio will be disabled
volume number 1 The general sound volume for music/sfx (between 0 and 1)
musicvolume number 1 If music was added to the image, play it at this volume (between 0 and 1)
mutedvolume number 0 If music was added to the image, fade it to this volume while other audio plays (between 0 and 1) 
// Show an image starting at the specified viewport using a minimap
<micr-io id="LmnFB" 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.

See our JS API documentation for more details.

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.