Digital pattern library


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

Options available

Image specifications

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:

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