Marble - 360 degree image viewer

This image viewer displays equirectangular 360 degree images, and is based on three.js

Installation

You can install marble via bower:

bower install marble

Then reference the marble js file like so:

<script src="bower_components/marble/dist/marble-latest.min.js"></script>

Or use the CDN file from here:

https://cdn.rawgit.com/jsguy/marble/master/dist/marble-latest.min.js

Usage

These examples will each show a 360 degree image at 100% width, 480px height, or if the script tag is inside a container with a height and/or width set, it will use that.

Unobtrusively with a preview image

<img src="pic-preview.jpg" data-previewimg="pic-preview.jpg" data-img="pic.jpg">
...
<script src="marble-latest.min.js"></script>

With a single script tag:

<script src="marble-latest.min.js" data-img="pic.jpg"></script>

Manually

<span id='target'></span>
<script src="marble-latest.min.js"></script>
<script>
    marble.init(document.getElementById('target'), {
        img: 'pic.jpg'
    });
</script>

As a slideshow

<script src="../src/marble.js" data-img="pic1.jpg|pic2.jpg|pic3.jpg"></script>

Note: to specify that you want a slideshow, simply include multiple images separated by a vertical bar "|".

Options

You can specify options using data attributes on the script tag, here is a list of options:

data-img - URL to the 360° image you want to display
data-previewimg - optional URL to a preview image, this will cause the player to lazy load the image when the user clicks
data-horizontal - horizontal degrees offset to start displaying the image, eg: 180 means show the "back" of the image initially, default is 0
data-vertical - vertical degrees offset to start displaying the image, eg: -20 means "look down by 20 degrees", default is 0
zoom - amount to zoom in/out - positive is zoom in, negative is zoom out, default value is 0
zoommax - maximum amount of zoom, beyond 50, the image starts to look quite blurry, default is 50
zoommin - minimum amount of zoom, the user will see a spherical shape with your 360 image, when the value is below -110 or so, depending on the diemnsions of your image viewport, default is -250
animatezoom - animates a zoom from zoommin to 0 on startup, default is false
data-width - the width of the image in pixels, default is to use the container width, or the full width, if no width is set
data-height - the height of the image in pixels, uses the container height, or 480px if no height is set on the container
data-spin - how many degrees to turn per second, when spinning is enabled, default is 3, set to 0 to disable spinning
data-startspin - start spinning when the photo loads
data-animate - decelerate animation when the photo loads
data-allowfullscreen - allow the user to go full-screen - only available if the browser supports fullscreen, default is true
data-allowuserinteraction - do we allow the user to interact with the image, default is true
data-clicktotogglespin - does clicking stop/start spinning, default is false
data-behave - don't render if there is another image 360° animating/spinning, or the user is interacting with another 360° image on the same page: this provides the best UX when there are several images on the page at once, default is true
data-overlay - overlay a pixel mask to darken the image slightly - the can help with the visual apperance of some images, and is useful for background images, default is false
data-menutimeout - how long till the menu auto-hides after mouseover in ms, default is 3500
data-fps - specify how many FPS to use, (1-60), default is 60, this might be useful to limit CPU/GPU usage if you have several spinning 360° images on the page at once
data-usedeviceorientation - allow mobile devices to move the image using the accelerometer, default is false mainly due to some phones accelerometer implementation being faulty
data-slideshowdelay - time to show each picture in milliseconds, default is 9000
data-slideshowindex - what slide to start on (0-indexed), default is 0

Examples

See the examples directory for some examples