HTML5 Lightbox issues?!

[panovrlover]

We've had a couple of problems lately with clients who have used a lightbox to open up the HTML page output from Pano2vr. We set the page to display full browser screen and in the past this has worked a treat with the flash version being shown on a desktop and the hTML5 version showing on an ipad for example.

We have had 2 clients recently come back to us informing that the HTML5 versions aren't working properly in the lightbox, and on checking this is correct. It loads up but won't let you actually control it, and the whole pano zooms in slowly, very strange.

Any thoughts?

[Hopki]

Hi,
OK its the Apple iFrame issue.
Not sure if you can use a div, something like this:

Code: Select all

<div style="margin: 0 auto; width:100%; height:100%;">
            <object type="text/html" data="pano.html"
                style="width:640px; height:480px; margin:1%;">
            </object>
        </div>

Regards,
Hopki

[panovrlover]

Hi Hopki,

Thanks for the response, does this go on the HTML page output or on the actual web page itself? Or use the below instead of the lightbox code?

Sorry my coding skills are lacking!

[Hopki]

Hi,
Ok, looking at your page code forget what I said, it does not apply here.

Hers's my workaround unless any coders out there knows better

1) Publish a Flash with HTML5 fullback output with fullscreen selected in the HTML tab.
2) Embed that in an HTML page using <div> tag.

You then open this page in your site using fancybox.
Just tested this on my iPad with a two node tour and it works using an iframe to embed the div.html page, note i'm not using fancybox but you still get the same issue on the iPad with just using iframes.

In the attached project you will see in the output folder my web page (mywebpage.html) this then embeds the div.html using iframe.
The div.html embeds the HTML page from Pano2VR.

Regards,
Hopki

[firey]

hi hopky,

i inform some others issue with iframe, so that everyone can check it out and fix it

1 - The iframe slowly stretching when viewed in ipad:
When i view the tour (which is integrated to website by iframe) in Ipad, i see the width is ok, but the height of iframe is continously increase, make the iframe stretching non-stop
Solution: add scrolling="no" to the iframe
Result: <iframe src="" width="100%" height="100%" scrolling="no"></iframe>

2 - The iframe can not toggle full screen
Solution: add allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" to the iframe
Result: <iframe style="width:100%;height:100%" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" src=""></iframe>

3 - The flash plugin with on-top over all other web-element (chrome is ok, but issue in firefox or ie)
If a website use tour in an iframe, and there are other web element on-top of tour, but "disappear" - it because of all that element is below the flash plugin
Solution: add params.wmode = "opaque" in the configuration of swfobject in .html file
Result:

Code: Select all

....
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
			var flashvars = {};
			var params = {};
			params.quality = "high";
			params.wmode = "opaque";
			params.bgcolor = "#ffffff";
			params.allowscriptaccess = "sameDomain";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "pano";
			attributes.name = "pano";
			attributes.align = "middle";
			if (startNode.length>0) {
				flashvars.startnode=startNode;
			}
			swfobject.embedSWF(
				"index.swf", "container", 
				"100%", "100%",
				"9.0.0", "", 
				flashvars, params, attributes);
...

[Hopki]

nice one
Hopki

[ASmyth]

Hi Hopki,

It is great that one of the forum members came up with a workaround for this IOS issue. It is a great community.

One important thing I think to remember is that a lot of Pano2VR users like me are photographers (not coders) that take the shots, stitch them and then provide the URL to the client (eg a hotel) and tell them to get their web developer to put them on their website for them. Typically the web developers are not enthusiastic and need a bit of hand holding in order to get it done right. I have to be able to tell them the absolute simplest way to display the tours properly or else I have lost them and also the trust of my client (the hotel). I cannot be sending them work arounds and code changes to get iFrames and the likes to work because what was purported to be a simple thing has now become complicated and potentially expensive.

At the moment I cannot tell my clients to put the tours into an IFrame because they will not work. The best I can do is to tell them to get the tours to open in a new window similar to what was done here http://www.lawlorshotel.com ... this is not nearly as elegant as an Iframe.

Is there anything else you would suggest that is easy and will work for multi-node tours with dropdown menus for Flash and HTML5 ?

Best wishes,
Alan

[Hopki]

Hi Alan,
There have been a few workarounds for iOS, this is just one.
Thomas is looking into this and if there is a good fix for this then he will fix it.
Until the next Apple update
Regards,
Hopki

[Carel]

I have tried Firey's iframe solution to get the fullscreen button to work, but the pano only goes fullscreen *inside* the iframe on an ipad or android. On PC browsers (Chrome, Safari and Firefix) the pano goes to real fullsreen. Has this issue still not been resolved or did I do something wrong?
Here is a simple test setup with one pano in an iframe: http://www.sphericalpanoramas.com/unive ... frametest/
This has become a rather embarrassing issue on my Universal Studios backlot vr tour, where after several months, the tour still does not work as intended on iOS devices.

Carel

[Carel]

I have also tried this with Hopki's earlier suggestion to place the pano.html page inside a div. http://sphericalpanoramas.com/Universal-iOS-divtest/
But in that case the page freezes in Safari (on a PC) when I click on the fullscreen button and in Chrome the whole page goes to fullscreen, not the pano as intended.
I notice that in the above url I had included allowfullscreen, but this was just a desperate attempt to get it to work. I had previously tried it without any allows, with the same result.
The other buttons function as intended.

Carel

[Hopki]

Hi Carel,
It appears that all that is needed is to add scrolling="no" to the iframe code. An example of the full iframe which was provided by firey is shown below.

Code: Select all

<iframe style="width:100%;height:100%" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" src=""></iframe>

To date I do not think that the Apple mobile devices recognise the fullscreen API so fullscreen will only work with computers.
Regards,
Hopki

[Carel]

So there is no way to get the pano out of the iframe at least browser-filling? I had already included scrolling="no".
As I use a different skin for iOS anyhow, would it be possible to have the fullscreen button open a new tab with browser filling pano?
On second thought, that would be confusing when one clicks on the fullscreen button again once in the new window/tab.
But I am still hoping there is a simpler way to at least jump out of the iframe for browser-filling fullscreen, or is there a lightbox variant that works on iOS for going to browser-filling fullscreen?

Carel