Fullscreen Homepage (Index) Templates?

FAP · Wed Sep 04, 2013 1:37 pm

Hi,

I am fairly new to Pano2vr. I have exported several projects but was wondering if there is a way to adapt the fullscreen.html files to make a fullscreen Homepage. Is it as simple as adding a header and footer to the page?

Does anyone have any templates?

I have botched up a test fullsceen page for my site: www.fallenangelphotography.co.uk,
problem is on ipad and iphone the tour squashes into a very thin letterbox.

Any thoughts?

Cheers

Rob

Don · Wed Sep 04, 2013 6:17 pm

FAP wrote:... on ipad and iphone the tour squashes into a very thin letterbox.
Any thoughts? ...

Your home page displayed squashed on my Windows 7 laptop too. Try the "Fullscreen" option found in the skin editor >> HTML tab. That will open the pano full-browser. Note, full-browser is not the same as full-screen, and full-browser works well for a home page, so the visitor still has all their browser menu items. I recommend full-browser for a home page.

Here's a thought: use a photo editor (Photoshop) to add menu items (i.e. About Us, Contact Us, etc) into the actual pano image, then in pano2vr create area hotspots on those menu items, and then re-output the pano tour. Some of the hotspots will lead to other nodes in the tour (the tour becomes the web site), and some of the hotspots will lead to regular web pages (also part of the web site).

Your idea for a pano home page works well if you are comfortable coding with html, css and javascript.

Templates? I would like to see examples too, if they exist, but I have not seen any. You are the first!

EDIT: Nix the idea of photo editing the menu items into the actual pano image. I experimented and found they look warped as the pano spins. Custom pano2vr skin editor hotspots look and perform much better.

FAP · Wed Jan 08, 2014 5:09 pm

Hi,

Thanks for the reply, sorry for my really delayed response.
I am still no further with the full-browser option for homepage.

I have found a really good example of what i am attempting to achieve: http://patrickcheatham.com
This homepage is really good.

Rob

hum@no.id · Wed Jan 08, 2014 8:06 pm

This my full browser view - http://astanacapital.com/index.php?do=c ... =portfolio
achieved via Iframe

v4.1 (HTML5 only/ Flash completely removed from concept)

jmcilvaine · Wed Jan 08, 2014 11:08 pm

humanoid: I find your photography to be AMAZING..would you mind sharing your workflow to get such incredible results?

FAP, I have attached a template you can use to fill a webpage with your panorama, it is responsive so it will sizes it self to any window/screen:

http://tours.inmotionrems.com/fullscreen.php

just drop your file in the iframe "src". You could easily call this page "index.html" to make it a homepage and add hotspots with "go to URL" actions to create a "menu" to link other pages on your site.

jmcilvaine · Wed Jan 08, 2014 11:17 pm

FAP: copy/paste (I cant upload an HTML or PHP file here) doctype for this example is HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive iFrame</title>
<style type="text/css">
html,body {height:99%; overflow:hidden;}
.wrapper {width:100%; height:100%; margin:0 auto;}
</style>
</head>
<body>
<div class="wrapper">



<iframe src="http://PATH_TO_YOUR_SOURCE_FILE" frameborder="0" width="100%" height="100%" allowfullscreen scrolling="no"></iframe>



</div>
</body>
</html>

hum@no.id · Thu Jan 09, 2014 4:45 am

would you mind sharing your workflow to get such incredible results?

This comes after ten years of experience and experimentation

For Iframe need to do one important condition - box-sizing

Code: Select all

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;