03/2011 - this plugin is now updated to a new version: PanoPress
Jan 2011 - this code has been updated to a new version with iphone/ipad support, go here for the new code
this shortcode allows easy adding of individual krpano panoramas (not multi-pano tours) to a wordpress site by uploading 2 files, pano-name.jpg for a preview image & pano-name.mov for pano display via krpano.swf
the shortcode is used like this - [krpano file="pano-file-name" title="Panorama Title"]
all pano images are displayed using a single pano.php & a single pano.xml file, as the pano file name is specified in the shortcode and passed as a php var to the pano.php file for display
the "file" parameter is the name of the pano you wish to display, and these files should be named identically like apple.mov & apple.jpg - these files are uploaded via ftp as in the image below
or you could change your wordpress settings to allow upload directly to the pano folder via the wordpress post media upload box, make sure to turn off "organize files by date"
this will result in the jpg file being displayed on your wordpress page, and clicking on this jpg will open a page displaying the .mov file via krpano - the link is set to target="_blank" so the pano page will open in a new window, or you could change this to use one of the various lightbox clones, as i do on my site
here is an example of the result on my site - http://www.samrohn.com/360-panorama/audubon-terrace-nyc/
first, set up your directories inside wp-content like this -
pano.xml is your custom xml file which will be common to all panos, use this for nav buttons etc, but pano images will be specified by the shortcode, do not add them to the xml
create a new text file, name it pano.php, paste in the following and upload it to the directory you created earlier
this file will receive the file name var from the shortcode, and insert it into the qtvr .mov file name on line 19
<html>
<head>
<title>panorama</title>
<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/><b/r></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']; ?>.mov");
swf.addVariable("setview", "true");
swf.addVariable("progress.showwait", "none");
swf.addVariable("progress.showload", "none");
swf.embed("krpanoDIV");
</script>
</body>
</html>
Display More
then paste the following code into your wordpress installations functions.php file just after the opening <?php tag
note the " pano.php?pano='.$file.' " bit on line 11, this feeds the pano filename as a php var to the pano.php file
also note the target="blank" & empty class="" element on the same line, these can be altered to suit your site
// KRPANO SHORTCODE
// Sam Rohn http://www.samrohn.com
// 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.'" target="_blank" class="">
<img class="pano" src="'.get_bloginfo('url').'/wp-content/panorama/pano/'.$file.'.jpg" alt="'.$title.'"/></a></div>
<div align="center"><p>Click on Image to view 360° VR Panorama of '.$title.'</p></div>';
}
add_shortcode(krpano, 'panorama');
// END KRPANO SHORTCODE
Display More
boom, thats it :)
adding other vars like pan tilt & zoom or custom xml per pano to all this is pretty simple
this works with the latest wordpress 3.0.1 & krpano 1.0.8.11 + swfkrpano.js
i still need to figure out iphone/ipad integration, thats up next -
enjoy :)
sam