heuzef
/
pannellum
mirror of https://github.com/mpetroff/pannellum.git
1
0
Fork 0
Code Issues 0 Releases 22 Wiki Activity
Browse Source

Added full screen API support.

tags/1.0
Matthew Petroff 12 years ago
parent
ebe8811c73
commit
ccc1bfb6d9
5 changed files with 64 additions and 96 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      configuration.htm
  2. +2
    -2
      examples/example.htm
  3. +7
    -0
      src/css/pannellum.css
  4. +49
    -93
      src/js/pannellum.js
  5. +5
    -1
      src/pannellum.htm

+ 1
- 0
configuration.htm View File

@@ -12,6 +12,7 @@
embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' +
' width="' + escape(form.embed_width.value) +
'" height="' + escape(form.embed_height.value) +
'webkitAllowFullScreen mozallowfullscreen allowFullScreen' +
'" style="border-style:none;"' +
' id="' + escape(id) +
'" src="' + escape(form.pannellum_url.value) +


+ 2
- 2
examples/example.htm View File

@@ -5,6 +5,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<iframe title="pannellum panorama viewer" width="480" height="390" style="border-style:none;" id="pannellum_bBp5kpMDES" src="../src/pannellum.htm?panorama=../examples/examplepano.jpg&amp;id=pannellum_bBp5kpMDES&amp;logo=yes&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff"></iframe>
<iframe title="pannellum panorama viewer" width="480" height="390" webkitAllowFullScreen mozallowfullscreen allowFullScreen style="border-style:none;" id="pannellum_bBp5kpMDES" src="../src/pannellum.htm?panorama=../examples/examplepano.jpg&amp;id=pannellum_bBp5kpMDES&amp;logo=yes&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff"></iframe>
</body>
</html>
</html>

+ 7
- 0
src/css/pannellum.css View File

@@ -11,6 +11,13 @@ body
cursor:default;
}

#page
{
background-image:url('img/background.png');
width: 100%;
height: 100%;
}

#zoomcontrols
{
position:absolute;


+ 49
- 93
src/js/pannellum.js View File

@@ -1,6 +1,6 @@
/*
* pannellum - an HTML5 based panorama viewer
* Copyright (C) 2011 Matthew Petroff
* Copyright (C) 2011-2012 Matthew Petroff
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
@@ -48,6 +48,8 @@ lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;

var fullWindowActive = false;

var isTimedOut = false;

var about_box = document.getElementById('about_box');
@@ -340,111 +342,65 @@ function getURLParameter(name)
}
}

// expand to full window
var crosssitescripting;
try
{
var panoramaiframe = parent.document.getElementById(getURLParameter('id'));
var originaliframewidth = panoramaiframe.width;
var originaliframeheight = panoramaiframe.height;
var originalposition = panoramaiframe.style.position;
var originaltop = panoramaiframe.style.top;
var originalleft = panoramaiframe.style.left;
var originaloverflow = parent.document.body.style.overflow;
var fullWindowActive = false;
crosssitescripting = false;
}
catch(event) // cross-site scripting error
{
crosssitescripting = true
}
function fullWindow()
{
// prevent scroll bars
parent.document.body.style.overflow = 'hidden';
// position iframe in top corner
panoramaiframe.style.position = 'absolute';
panoramaiframe.style.top = '0px';
panoramaiframe.style.left = '0px';
// resize iframe to full window
panoramaiframe.width = '100%';
panoramaiframe.height = '100%';
// set viewer mode
fullWindowActive = true;
// reset panorama renderer
try
{
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,window.innerWidth / window.innerHeight,1,1100);
render();
}
catch(event)
{
// panorama not loaded
}
}
function hideFullWindow()
{
// reset iframe
panoramaiframe.width = originaliframewidth;
panoramaiframe.height = originaliframeheight;
panoramaiframe.style.position = originalposition;
panoramaiframe.style.top = originaltop;
panoramaiframe.style.left = originalleft;
// reset scroll bars
parent.document.body.style.overflow = originaloverflow;
// set viewer mode
fullWindowActive = false;
// reset panorama renderer
try
{
camera.aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.projectionMatrix = THREE.Matrix4.makePerspective(fov,window.innerWidth / window.innerHeight,1,1100);
render();
}
catch(event)
{
// panorama not loaded
}
}
function toggleFullWindow()
{
if(crosssitescripting == false)
if(fullWindowActive == false)
{
if(fullWindowActive == false)
try
{
fullWindow();
var page = document.getElementById('page');
if (page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else {
page.webkitRequestFullScreen();
}
document.getElementById('fullwindowtoggle_button').id = 'fullwindowtoggle_button_active';
fullWindowActive = true;
}
else
catch(event)
{
hideFullWindow();
document.getElementById('fullwindowtoggle_button_active').id = 'fullwindowtoggle_button';
}
}
else
{
if(getURLParameter('popout') != 'yes')
{
// open new window instead
var windowspecs = 'width=' + screen.width + ',height=' + screen.height + ',left=0,top=0';
var windowlocation = window.location.href + '&popout=yes';
try
if(getURLParameter('popout') != 'yes')
{
camera.aspect = window.innerWidth / window.innerHeight;
windowlocation += '&popoutautoload=yes';
// open new window instead
var windowspecs = 'width=' + screen.width + ',height=' + screen.height + ',left=0,top=0';
var windowlocation = window.location.href + '&popout=yes';
try
{
camera.aspect = window.innerWidth / window.innerHeight;
windowlocation += '&popoutautoload=yes';
}
catch(event)
{
// panorama not loaded
}
window.open(windowlocation,null,windowspecs)
}
catch(event)
else
{
// panorama not loaded
window.close();
}
window.open(windowlocation,null,windowspecs)
}
else
{
}
else
{
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
if(getURLParameter('popout') == 'yes') {
window.close();
}
document.getElementById('fullwindowtoggle_button_active').id = 'fullwindowtoggle_button';
fullWindowActive = false;
}
}

+ 5
- 1
src/pannellum.htm View File

@@ -10,6 +10,8 @@
</head>
<body>
<div id="page">
<div id="container"></div>
<noscript><div id="nojavascript"><p>Javascript is required to view this panorama.<br>(It could be worse; you could need a plugin.)</p></div></noscript>
@@ -43,5 +45,7 @@
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="js/pannellum.js"></script>
</div>
</body>
</html>
</html>

Write Preview
Loading…
Cancel
Save