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


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


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">

  <meta charset="UTF-8">
  <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'

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

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


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


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>
    <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">

            //START panorama            
                move: 500,
                wheel: 2,
                drag: 1,
                attenuation: 3,
                // to display the true size of the image
    <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">

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


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