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
Fullscreen Homepage (Index) Templates?
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.FAP wrote:... on ipad and iphone the tour squashes into a very thin letterbox.
Any thoughts? ...
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.
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
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
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)
achieved via Iframe
v4.1 (HTML5 only/ Flash completely removed from concept)
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
-
- Posts: 48
- Joined: Thu Oct 11, 2012 11:59 am
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.
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.
-
- Posts: 48
- Joined: Thu Oct 11, 2012 11:59 am
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">
<!---------------------------------->
<!------Drop your source file here-->
<!---------------------------------->
<iframe src="http://PATH_TO_YOUR_SOURCE_FILE" frameborder="0" width="100%" height="100%" allowfullscreen scrolling="no"></iframe>
<!---------------------------------->
<!---------------------------------->
<!---------------------------------->
</div>
</body>
</html>
<!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">
<!---------------------------------->
<!------Drop your source file here-->
<!---------------------------------->
<iframe src="http://PATH_TO_YOUR_SOURCE_FILE" frameborder="0" width="100%" height="100%" allowfullscreen scrolling="no"></iframe>
<!---------------------------------->
<!---------------------------------->
<!---------------------------------->
</div>
</body>
</html>
This comes after ten years of experience and experimentationwould you mind sharing your workflow to get such incredible results?
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;
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj