How can I best embed a pano in a web page??!!

Q&A about the latest versions
Post Reply
User avatar
keith@fachwen.org
Posts: 136
Joined: Tue Aug 28, 2012 11:34 am
Location: North Wales
Contact:

Hi, this may be a simple question for some of you.

I haven't used Pano2VR for some years, I've been dong other things :D I'm starting up shooting panoramas again with a new camera and fisheye. I'm quite excited to start using the E-M1 as it has a HDR mode that will take 7 shots 2ev apart with one press of the shutter, amazing! And I can control it through wifi from my iPhone or iPad, which makes checking the focus very simple, like having a huge viewfinder in your hand!

I've kept Pano2VR up to date and have upgraded with every new version. As well as other tools like PhotomatixPro and PTGuiPro. I still regularly use PTGui to stitch partial panos shot hand-held, it's very good and fast for this.

On my own website I had a gallery of all my panoramas and I used to simply embed the single .mov file, assuming people already had Apple's QT pluggin. I had some JS to make them full-screen. This is all very old school now, and doesn't work with handhelds, etc. Mac OSX won't even play these QTVR .mov files anymore, which is a bit sad I think. So my old site no longer seems to work on a lot of people's browsers. I think the HTML5 output from Pano2VR is great for using on any device.

I've realised that in the past I mostly created links on a web page which opened a pano's Pano2VR html folder/files in a new window. All very straightforward.

What I'm not sure how to do is embed an auto rotating pano directly in a web page amongst other elements as it's not a single file like before... Hope someone can point me in the right direction?

There's a good example on the PTGui home page: https://www.ptgui.com/ You can go full screen and back without leaving the page.

I used to build websites in Adobe GoLive, which still works on my Mac!! But is abandoned now, and I can't really remember how to to use it :shock: So I've hunted around for a replacement. I'm trying out RapidWeaver for now. It's very quick and simple to create a basic collection of pages, everything like all the menus are created and updated automatically, you just drag and drop pages around at will. Best of all you can change the whole look of the site instantly by clicking on a new theme or template. It means I can focus my time on shooting and creating the panoramas rather than web design. There are some really cool and very customisable themes to buy as well. Only runs on a Mac though as a desktop application, not a CMS like Wordpress, Drupal or Joomla.

The good thing about RapidWeaver is that it's also almost like a developers platform too, I can let it build and maintain the skeleton of my site, but in each page I am free to add my own html and JS, etc, so I can still be tinkering with code if I want too!

First effort here, very much a work in progress: http://www.fachwen.org/

Old site here: http://www.fachwen.org/qtvr/

(If I had the time it would be possible to build a RapidWeaver theme to exactly replicate the design of my old site)

Thanks in advance for any help with the embedding 8)
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

U're welcom!
This picture from the past... from the time of the Holy Roman Empire :)
http://www.fachwen.org/files/qtvr-transparent.gif

*LOL... QuickTime VR Authoring Studio :wink:
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
User avatar
keith@fachwen.org
Posts: 136
Joined: Tue Aug 28, 2012 11:34 am
Location: North Wales
Contact:

Thanks Gumir, yes, very old image, hope Apple won't be too litigious!!

Funny, I was looking at your site yesterday, some great ideas there on how to present tours with lots of nodes. Have you coded it yourself or is it something Roundme do?

Solved my embedding issue, trivial really... A little bit of CSS:

Code: Select all

<iframe src="http://www.fachwen.org/panos/041227curbar/index.html" width="300" height="150"></iframe>
Great little site by Google to help you preview things like this:

http://www.w3schools.com/html/tryit.asp ... ight_width
User avatar
hum@no.id
Posts: 945
Joined: Sat Sep 09, 2006 10:35 pm
Location: Dark side of the Moon
Contact:

http://gumirj.com/portfolio - pano2VR

Also explore free concept - http://www.marzipano.net/

*about fullscreen
a bit addition - "allowfullscreen"

Code: Select all

<iframe src="http://www.fachwen.org/panos/041227curbar/index.html" width="300" height="150" allowfullscreen></iframe>
Gumir J | VR Panoramic Photographer | mobile: +77055717171 | skype: gumirj
website: gumirj.com | google.com/+gumirj | facebook.com/gumirj | twitter.com/gumirj
User avatar
Hopki
Gnome
Posts: 13018
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

If using an iFrame:

Code: Select all

<iframe src="index.html" name="panorama" width="640" height="480" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="float:left; margin-left:0px" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
This has all the allow fullscreen for the different browsers.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
keith@fachwen.org
Posts: 136
Joined: Tue Aug 28, 2012 11:34 am
Location: North Wales
Contact:

Thanks both, all working fine now :-)
Post Reply