Easily embed multiple 360° photos into your webpages using the power and simplicity of A-frame.
A-frame makes it very easy to build WebVR experiences, including the ability to display 360 images and even to embed them into existing html pages.
Where it gets tricky though, is if you want to include multiple 360 photos into the same page. Currently, only one A-frame "scene" (<a-scene>) can exist on a page, so if you need multiple 360 photos to be embedded in a page, you'd need to create a new html page for each photo and embed each one of those new pages in an iframe.
The embed360.js script handles all of this for you, by dynamically creating these iframes and building a simple A-frame 360 photo scene inside each one.
Add a div and an image for each 360 photo:
<div class="embed360">
<img src="/path/to/image.jpg">
</div>
Include the embed360 script:
<script src="path/to/embed360.js"></script>
Call embed360() and pass in a class, id, or other selector for the photo container(s):
<script>
embed360('.embed360');
</script>
It's recommended that you specify a height and max-width for your 360 photo containers so they end up sized appropriately and not too short or too wide. How you do this is up to you, but here is the CSS used for the examples on this page:
.embed360 {
height: 350px;
max-width: 700px;
}
That's it!
Provide your own path to the aframe library, as the second argument to embed360() (uses cloudflare CDN version by default).
<script>
embed360('.embed360', '/your/path/to/aframe.js');
</script>
Use a data attribute to specify the starting position (x, y, and z-axis rotation) for each photo.
<div class="embed360" data-rotation="0 90 -10">
<img src="/path/to/image.jpg">
</div>
Works in latest versions of Chrome, Firefox, Safari, Edge. Works in IE11 by using a polyfill for CustomEvent that A-frame needs.
