Fullscreen Homepage (Index) Templates?

Q&A about the latest versions
Post Reply
FAP
Posts: 5
Joined: Wed Aug 28, 2013 12:42 pm

Fullscreen Homepage (Index) Templates?

Post by 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
Posts: 140
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Re: Fullscreen Homepage (Index) Templates?

Post by 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
Posts: 5
Joined: Wed Aug 28, 2013 12:42 pm

Re: Fullscreen Homepage (Index) Templates?

Post by 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

User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Re: Fullscreen Homepage (Index) Templates?

Post by 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)
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj

jmcilvaine
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Re: Fullscreen Homepage (Index) Templates?

Post by 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
Posts: 48
Joined: Thu Oct 11, 2012 11:59 am

Re: Fullscreen Homepage (Index) Templates?

Post by 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">
<!---------------------------------->
<!------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>

User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

Re: Fullscreen Homepage (Index) Templates?

Post by 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 :D


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

Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests