Digital pattern library

Photosphere

Experimental

This pattern currently is not fully supported by all browsers so it should be used for non-critical purposes only. It will degrade to a static image for those browsers that do not support the 360° scrolling.

A photosphere is used to showcase a 360° image using Google VR view. This is done via a JavaScript API to manipulate the contents of an <iframe>.

Rules for photospheres

Must always be contained within a responsive embed pattern.
Must only be used on the content whole, content thirds, content halves and featured media patterns.

Options available

Photosphere

Image specifications

Images can be stored as png, jpeg, or gif. We recommend you use jpeg for improved compression.
For maximum compatibility and performance, image dimensions should be powers of two (e.g. 2048 or 4096).
Images should be 2:1 aspect ratio (e.g. 4096 x 2048).

Include VR view script

A link to the following file is required for a photosphere to work. Put the code at the bottom of the body section.

HTML code

Use the following code to ensure that the photosphere is responsive and work on all sizes of devices:

JavaScript function

Add the following code to the page and amend the following parameters:

Photosphere-ID: this is the <div> where the photosphere will be displayed, change this to match the Photosphere-ID you specified in the HTML.
Image: this is the full URL of the image you wish to use, replace path/to/IMAGE/ with the desired URL.

window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
	var vrView = new VRView.Player('#Photosphere-ID', {
		image: 'path/to/IMAGE/'
	});
}

Photosphere

Example

Code