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 1.8:

<link rel="stylesheet" type="text/css" href="https://b.micr.io/micrio-1.8.min.css" />
<script src="https://b.micr.io/micrio-1.8.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

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 easiest way to embed an image in your page.

Copying and pasting this HTML-fragment in your HTML:

<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 `<micrio>` 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 <micrio> tags. Include the Javascript and CSS references to the Micrio client library in your HTML <head>:

<link rel="stylesheet" type="text/css" href="//b.micr.io/micrio-1.8.min.css" />
<script src="//b.micr.io/micrio-1.8.min.js"></script>

Then, you can simply add custom <micrio id="[image ID]"> elements in your HTML, which will be automatically loaded:

<micrio id="oJeaF"></micrio>

Result (fully zoomable):

You can simply style the <micrio> elements using CSS to set the desired width and height.

3.2.2.1. Custom options for `<micrio>` elements

You can specify additional options as attributes using the <micrio> 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
`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
`musicvolume`	`1`	If music was added to the image, play it at this volume (between `0` and `1`)
`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
<micrio id="oJeaF" view=".5711,.6859,.5929,.7030" minimap></micrio>

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.

Log in with your Google account