*** The original post has been edited to reflect what I discovered while searching for answers. ***
Okay... so I'm working on a new website and decided to rework my panos with the latest available code. My previous site was hand-coded from the ground up (HTML/CSS/JS) while the new one will be based in WordPress. My main goal was to determine the best path to the most interactive features - given the current available options.
There are a lot of different posts regarding WordPress, full screen, mobile and combined solutions. Hopefully this post is helpful to those trying to find their way.
Three approaches to embedding a pano or tour into a WordPress page:
- Use iframe code to embed HTML generated via krpano (droplets or manually)
- Use PanoPress (WordPress plugin) to embed XML generated via krpano (or various other viewers)
- Use the process outlined on the krpano: 'Embedding into HTML' page
Results of different approaches:
Using iframe + krpano code (HTML):
- Full-screen button/option not available on computer or mobile
- Gyro available on mobile
- Code used: <iframe src="/360/panos/01/index.html" width="940" height="529"></iframe>
Using PanoPress + krpano code (XML):
- Full-screen button/option available on computer
- Full-screen button/option not available on mobile (however, there is an option to display a nearly full-screen lightbox popup)
- Gyro not available on mobile (may also display errors if code is left in/executed)
- Code used: [pano file="/360/panos/01/tour.xml" width="940" height="529"] (lightbox popup controlled via plug-in preferences)
krpano: 'Embedding into HTML:
- Full-screen button/option available on computer
- Full-screen button/option not available on mobile
- Gyro available on mobile
- Code used:
<script src="/360/swfkrpano.js"></script>
<div id="pano"></div>
<script>
embedpano({swf:"/360/krpano.swf", xml:"/360/panos/01/tour.xml", target:"pano"});
</script> - I also stylized the 'pano' ID via CSS (set height, width, margins, etc) so I didn't need to do that each time I added a new pano.
* You would need to organize and upload your files via FTP before using any of the code in your WP pages. The above code references a directory named '360' at the root of my website that contains my SWF, JS, plug-ins, skins, licenses, etc. Individual pano files (XML & pano images) are located in individual directories found here: _root/360/panos/
My journey basically went in this order and I finally ended up using option #3. This is really where I should have started, but the forum posts I found regarding WordPress embedding sent me in a different direction. Later I came across the text where krpano advises against using iframes since it messes with the full-screen functionality.
I may take another look at PanoPress. It streamlines the process and provides an option for nearly full-screen viewing (via lightbox). I just didn't spend enough time with it to see if I could also get the gyro working. This may ultimately be a better solution for those not familiar with HTML/CSS coding.
Ideally, I think we all want the full-screen option working as easily on mobile as it does on the computer. For now, these seem to be the options.
*'mobile references synonymous w/ HTML5 code
** I've only tested the above on an iPad 2
Comments, clarifications, questions & answers welcome.