npm promulgates marsupials

    marble360

    1.0.0 • Public • Published

    Marble - 360° image viewer

    This image viewer displays equirectangular 360° 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

    Keywords

    none

    Install

    npm i marble360

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • jsguy