360 degree panorama tour - touch responsive
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I would like to get something working like this

http://tours.imagemaker360.com/Viewer/60.asp?id=124405

but works on a tablet and for touch devices. Lets assume i have an image that looks like this

http://tours.imagemaker360.com/media/virtualtours/panoramicimages/1053283.jpg

we should be able to pinch and zoom as well as use a mouse for the needed actions like in the example

The page can be in a bootstrap 3 template as a base.

awarded to Wikimedia

Crowdsource coding tasks.

4 Solutions


I have made this with a library called Panorado JS (Homepage) which works as you want I think.

Unable to provide demo because external images doesn't seem to work with the library. Here is a animated gif showing how it works though: http://i.imgur.com/3cL5bGU.gif

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Panorama</title>
  <script src="http://panorado.com/Download/Panorado_min.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.onload = function() {
    Viewer = new PanoradoJS(document.getElementById("ViewerCanvas"));
    Viewer.image = {
      src: '1053283.jpg',
      projection: 'flat'
    };
  }
  </script>
</head>

<body>
  <canvas id="ViewerCanvas" style="width:800px;height:450px">
    Please update your browser for HTML5 support!
  </canvas>
</body>

</html>
Are you able to post a solution to codepen or jsfiddle?
Qdev over 5 years ago
Sure! http://embed.plnkr.co/NLGdzLbSTAcy6BV7akte/preview If you click on edit, you'll see the source
VictorBjelkholm over 5 years ago

Try this: http://jsfiddle.net/u6q67/25/ http://jsfiddle.net/u6q67/25/show

It uses http://reel360.org/reel

Compatible with Safari 3+, Firefox 3+, Chrome, IE 6+ and Opera 9+, iOS, Blackberry 10 and Android 2.3+

Example: http://test.vostrel.net/jquery.reel/example/index.html

Options:http://reel360.org/reel#options

HTML5 Fullscreen API actually are experimental and wors only on latest desktop browser and doesn't works inside a iframe.


Hi,

I've created this solution using this script: http://www.univie.ac.at/ptox/uploads/panorama/preview/index.html

It is Responsive and it's working on every Device. It is working with css backgrounds too, not only with images.

JSFiddle: http://jsfiddle.net/dVfBW/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://skylightdev.net/panorama/jquery.panorama.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            //START panorama            
            $('#panorama').panorama({                
                speed:15,
                move: 500,
                wheel: 2,
                drag: 1,
                attenuation: 3,
                // to display the true size of the image
                //size:true,
                fps:60
            }); 
        });
    </script>    
</head>
<body>
    <div id="panorama" style="width:1000px">
        <div class="panorama_preloader" style="margin: 0 auto;width:32px;top: 50%; margin-top: -16px;"><img src="http://skylightdev.net/panorama/img/loading.gif"></div>
        <div class="panorama_img"><img data-src="http://skylightdev.net/panorama/img/panorama_demo.jpg"></div>
        <div class="panorama_title">

    </div>
</div>
</body>
</html>
Thx for the work! are you able to get zooming workng on this? when i tried to ping and zoom on mobile nothing happens. On desktop the scroller seems to latch on to panning so maybe you have an idea around this?
Qdev over 5 years ago
When I first saw the script, it had the scroll wheel implemented for the panning indeed. For the zooming it does need some more work to be done on the script as I didn't write it myself. I can try to remake it and see what can I do if you like :). Please let me know
SkylightDev over 5 years ago

https://skydrive.live.com/?cid=2B542EF04BD69AFE&id=2B542EF04BD69AFE!1372#cid=2B542EF04BD69AFE&id=2B542EF04BD69AFE!1372

I've created a custom panoramaViver, it uses css background-repeat and background-position.
Thanks to HammerJs it supports multitouch gesture on every devices,

I read up on how to obtain a equirectangular effect as like example: http://tours.imagemaker360.com/Viewer/60.asp?id=124405 in HTML5. Unfortunately, I deduced that it is only possible with WebGL that are not supported on the mobile:http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
However, you can simulate if instead of using a single 360 image, you use many images with lens correction.
To do this may be useful: http://ggnome.com/pano2vr.
Stefano Balzarotti over 5 years ago
View Timeline