03/2011 - this plugin is now updated to a new version: PanoPress
see this thread for more info - PanoPress - Wordpress plugin for 360° Panoramas w flash & html5
- - - - -
this is an update of my previous KRPano wordpress shortcode, the shortcode is now installed as a wordpress plugin, i have added some minor changes & fixes, and included support for iphone/ipad html 5 pano display
see my site for examples of panoramas embedded with this shortcode - http://www.samrohn.com
new - thanks to omer calev this code is now installed as a wordpress plugin, no more editing your themes functions.php :)
this code is for displaying individual krpano panoramas using a common xml file (not multi-pano tours or other per-pano custom xml) on a wordpress site
if you wish to embed multi-pano virtual tours, see the existing krpano wordpress plugin, or just link to the tours html page in an iframe or lightbox clone
this shortcode relies on a specific file structure to work, and is best suited to a site with many individual panos, all panos are displayed with a single krpano.swf & a single xml file, so this all lets you easily post new panos to your site without worrying about creating new xml files, and also allows you to easily update the krpano engine, nav buttons & other common xml, etc without having to remake every pano
The Shortcode -
the shortcode is used by putting text like this into a post -
[krpano file="pano-file-name" title="Panorama Title"]
"pano-file-name" should be the name of your pano image files, it would be "apple" for the files illustrated below, title can be whatever you wish
for the files in the illustration, the code would be like this [krpano file="apple" title="Apple Store 5 Ave - NYC"]
and the result would be a post something like this - http://www.samrohn.com/360-panorama/apple-store-manhattan/
pano files are added by uploading the pano qtvr.mov + images for iphone & preview to a directory as illustrated below
File Structure -
set up your files & directories like this inside wp-content -
apple.mov is the file displayed by krpano.swf, code could be altered to use all cube faces & no mov file if you wish
apple.jpg is the preview image displayed in your post, clicking on it opens the pano in a new window, but the code could be altered to embed in iframe, etc
apple_ipad_b.jpg etc are the images used by iOS devices, they should be named like in the directory image above, i use a pano2vr droplet to quickly prepare these files from a finished pano
XML File -
create your own xml file called pano.xml, upload as above, this is to define nav buttons, menu items, or other elements which will be common to all panos displayed, but do not specify any pano images in the xml as they wil be specified by the shortcode
The Shortcode Plugin -
create a new file called krpano-shortcode.php, paste in the following code, and upload it to your wordpress installs plugins directory, then go to your wordpress admin plugin page and activate the plugin called KRPano Wordpress Shortcode
<?php
/*
Plugin Name: KRPano Wordpress Shortcode
Plugin URI: http://krpano.com/forum/wbb/index.php?page=Thread&threadID=4246
Description: Embed KRPano flash & iphone/ipad panoramas in wordpress
Version: 0.3
Author: Sam Rohn
Author URI: http://www.samrohn.com
*/
// KRPANO SHORTCODE 2011
// usage: [krpano file="pano-name" title="Pano Title"]
function panorama($attributes, $content='') {
extract(shortcode_atts(array(
'file' => '',
'title' => ''
), $attributes));
return '<div><a href="'.get_bloginfo('url').'/wp-content/panorama/pano.php?pano='.$file.'&title='.$title.'" title="'.$title.'" target="_blank" rel="" class="">
<img class="pano" src="'.get_bloginfo('url').'/wp-content/panorama/pano/'.$file.'/'.$file.'.jpg" alt="'.$title.'"/></a></div>
<div align="center"><p>Click on Image to view 360° Panorama of '.$title.'</p></div>';
}
// END KRPANO SHORTCODE
add_shortcode(krpano, 'panorama');
?>
Display More
feel free to alter the returned html on lines 19-21 to suite your site, the code here will open the pano in a new window, this can be used with various lightbox clones by setting the rel="" attribute on line 19
pano.php -
create the file pano.php and insert the following code, upload as shown in the file structure image
<html>
<head>
<title><?php echo $_GET['title']; ?></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#111111; margin:0; padding:0; }
* html, * html body{ overflow: hidden; }
a{ color:#AAAAAA; text-decoration:underline; }
a:hover{ color:#FFFFFF; text-decoration:underline; }
</style>
</head>
<body>
<div id="krpanoDIV">
<noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/>
<br/>Javascript not activated<br/><br/></center></td></tr></table></noscript>
</div>
<script type="text/javascript" src="inc/swfkrpano.js"></script>
<script type="text/javascript">
var swf = createswf("inc/krpano.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "pano.xml");
swf.addVariable("qtvr", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>.mov");
swf.addVariable("setview", "true");
swf.addVariable("image.mobile.left.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_l.jpg");
swf.addVariable("image.mobile.front.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_f.jpg");
swf.addVariable("image.mobile.right.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_r.jpg");
swf.addVariable("image.mobile.back.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_b.jpg");
swf.addVariable("image.mobile.up.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_u.jpg");
swf.addVariable("image.mobile.down.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_iphone_d.jpg");
swf.addVariable("image.tablet.left.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_l.jpg");
swf.addVariable("image.tablet.front.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_f.jpg");
swf.addVariable("image.tablet.right.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_r.jpg");
swf.addVariable("image.tablet.back.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_b.jpg");
swf.addVariable("image.tablet.up.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_u.jpg");
swf.addVariable("image.tablet.down.url", "pano/<?php echo $_GET['pano']; ?>/<?php echo $_GET['pano']; ?>_ipad_d.jpg");
swf.addParam("allowFullScreen","true");
swf.addParam("wmode","transparent");
swf.embed("krpanoDIV");
</script>
</body>
</html>
Display More
boom, thats it, upload some pano image files, enter the shortcode in a post, hit publish :)
this is all tested and working on a brand new install of wordpress 3.0.4 & using KRPano 1.0.8.12 w current swfkrpano.js & krpanoiphone.js
thanks to michel, omer calev & tom mills for some of the new code included here :)
see the previous shortcode thread for more notes on usage & modifications - KRPano Wordpress Shortcode 2010
sam