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.0:

<script src="https://b.micr.io/micrio-3.0.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.0.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	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
`hookScroll`	`true`	Use mousewheel/trackpad scrolling for zooming
`events`	`true`	If set to `false`, no event handlers will be set up and the image will be non-interactive
`dragging`	`true`	Use dragging and touch events for panning
`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-hide`	`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`)
`muted`		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`)
`pinch-zoom`	`true`	Use trackpad/touchscreen pinching for zooming
`scroll-zoom`	`true`	Use mousewheel/trackpad scrolling for zooming
`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="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.

let image = new Micrio({

	// Image ID, required
	id: 'LmnFB',

	//// 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.

Log in with your Google account