KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible - HTML Embedding / Javascript

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

1

Freitag, 21. Januar 2011, 16:10

KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible

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

Quellcode

<?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');
?>

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

Quellcode

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

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

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Dieser Beitrag wurde bereits 31 mal editiert, zuletzt von »Sam Rohn« (16. März 2011, 09:49)

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

2

Samstag, 22. Januar 2011, 04:21

the shortcode is now installed as a wordpress plugin, no more editing functions.php, thanks to omer calev for helping with the plugin code :)

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

3

Samstag, 22. Januar 2011, 05:14

sam just an FYI you site does not load correctly in IE8. I have to put it in IE7 compatablilty mode for it to be right. THought you might want to test.

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

4

Samstag, 22. Januar 2011, 06:14

hm, thanks, i'm on a mac myself, guess i need to reinstall parallels or somesuch for IE testing, again...

unlikely this has anything to do with the shortcode though, its probably my sloppy theme coding...

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

Stoney

Schüler

Beiträge: 119

Wohnort: Portland, Oregon

5

Samstag, 22. Januar 2011, 10:55

Hey Sam, http://www.samrohn.com is working well using IE 9 Beta. Let me know if there is something I can test for you.

Zum Seitenanfang

badders

Anfänger

Beiträge: 4

Wohnort: East Kilbride

Beruf: Managing Director

6

Samstag, 22. Januar 2011, 14:44

Sam, can you explain the reason for the source pano being a qtvr .mov file format? i.e. what's the benefit over using say an equirectangular jpeg?

Badders

Andrew Baddeley
www.360tacticalvr.com
http://stores.ebay.co.k/360tacticalvr

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

7

Sonntag, 23. Januar 2011, 00:23

hey andrew -

2 reasons, 1st is that i originally had a large existing collection of qtvr files on my site already, and i wanted to convert my site to flash without too much hassle, and 2nd reason is that krpano lets you use qtvr mov files with the the opening view set inside the qtvr file (preview pano too), so i dont have to set initial pan/tilt/zoom etc per pano in each instance of the shortcode, but the shortcode could be easily expanded to accept these other variables...

qtvr or cube face also give better quality than a single equirectangular file when displayed via krpano, using a single equi results in some odd zenith/nadir distortion

it would be easy to change the code to use all cube faces or a single equi, i can post a modified all cube face jpg (no mov files) version if desired

i'd love to hear other suggestions too :)

stoney, thanks for the offer, i need to look over my sites css and whatnot & figure out whats going on, but feel free to test the shortcode :)

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von »Sam Rohn« (23. Januar 2011, 03:14)

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

8

Samstag, 29. Januar 2011, 10:30

krpano wordress plugin 2011 - new version testing

hi all -

i'm working on a new version of the plugin that uses a single plugin file, no more separate pano.php

this new version also works with standard output from the krpano multi-res & vtour droplets, so no more of my odd file structure, no more qtvr .mov files, etc

it also embeds panos directly in page with a proper krpano.js div embed or optionally in a hidden div for lightbox clones, so it should display properly in all browsers, from IE to iPad :)

im also working on a page to demonstrate the code & embedded output exactly, as the code on samrohn.com is actually a bit different than the more generic version that the plugin uses

i pretty much have all of this working now, but i would like to do some testing with others before i release to the general public

please post here or send me a PM if you wish to help test it out, thanks :)

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

lcne

Anfänger

Beiträge: 4

Wohnort: Denmark

9

Samstag, 29. Januar 2011, 19:48

Testing the shortcode plugin

Hi Sam,
I am testing my new site based on Wordpress, so I am willing and able to test your new plugin.

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

10

Mittwoch, 2. Februar 2011, 19:03

hi icne - the plugin is currently being re-written from the ground up by a proper experienced coder, and should be relaunched in the next week, stay tuned...

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sam Rohn« (3. Februar 2011, 09:18)

Zum Seitenanfang

Briger

Anfänger

Beiträge: 5

11

Freitag, 18. Februar 2011, 05:29

any news?

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

12

Freitag, 18. Februar 2011, 06:14

hi briger -

sorry for the delay, we are very close to releasing the new plugin, and we need people to test it in different environments to make sure everything is working properly for all

if you or anyone else is interested in testing the beta and providing feedback, please send me a pm, and i will get you on the (not yet public) plugin site

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

Briger

Anfänger

Beiträge: 5

13

Mittwoch, 23. Februar 2011, 08:33

I send you a PN

Pat

Zum Seitenanfang

junglejuz

Anfänger

Beiträge: 10

14

Donnerstag, 24. Februar 2011, 15:50

Thanks for your great plugin. I've got it working except for one thing. I can't seem to get the panorama to open to use in my Lightbox clone. I am using Fancybox and have adjusted the rel"" attribute as per your instructions..

I've typed rel="fancybox" and it seems to have no effect. Could this be because fancybox might not support video (.mov) files? I have also tried z-lightview, and changing the code to rel="z-lightview", but still nothing happens.

Could you please help me. I'm quite new at this and would really love to get this working.

Justin

Zum Seitenanfang

junglejuz

Anfänger

Beiträge: 10

15

Freitag, 25. Februar 2011, 03:43

A quick update. I tried adding class="fancybox" and this seems to open the fancybox when I now click on the Panorama. However nothing appears in the lightbox. It is blank and it is also only the size of the preview image. Any advice or assistance would be most appreciated.

Justin

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

16

Freitag, 25. Februar 2011, 04:38

hi justin -

i havent tried fancybox personally, but check the code below for exaample of proper usage,
& see the fancybox docs for more info - http://fancybox.net/howto

	Quellcode
1 2 3	fancybox iframe usage - <a class="iframe" href="http://www.example">This goes to iframe</a>

lightview should work fine w class="lightview" rel="iframe", again, see the lightview docs for usage details - http://www.nickstakenburg.com/projects/lightview/

otherwise, i am just writing up the documentation for the new plugin which i will release this weekend, promise :)

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Sam Rohn« (9. März 2011, 22:59)

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

17

Freitag, 25. Februar 2011, 18:47

Yes please!

Keep us posted!

*smile*

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

18

Dienstag, 1. März 2011, 00:12

Any news? :)

Woot! I'm excited! :)

Zum Seitenanfang

junglejuz

Anfänger

Beiträge: 10

19

Dienstag, 1. März 2011, 13:07

Thanks for your suggestion, however my understanding of how to use this code is practically zero. Is there a possibility you might be able to give me a quick run down on what to do? I'd be most grateful.

regards,

Justin

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

20

Mittwoch, 2. März 2011, 06:36

krpano wordpress plugin - PanoPress

hi justin -

look at the end of line 18 of the plugin, the blank rel="" & class="" , for lightview you could change it to rel="iframe" class="lightview" etc, check the docs for specifics with other clones, just keep reading it over and over and it eventually begins to make sense :)

otherwise

the NEW plugin is basically ready at this point, i am a bit behind on the documentation, the website is incomplete, but, for those who just cant wait -

http://www.panopress.org/

PanoPress will display panos created by the krpano tools droplets, works fine with multires, vtours, iphone, single-swf, etc

the xml generated by the droplets default config might need some path adjustments if using a global krpano swf & js file to display your panos, you can also choose to just have a separate swf + js in every pano folder and no adjustments should be needed, and of course its not an issue w single-swf panos

ill be making a more formal announcement shortly, once the site is a bit more presentable...

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible

KRPano Wordpress Shortcode Plugin 2011 - iPhone/iPad Compatible

Quellcode

Quellcode

krpano wordress plugin 2011 - new version testing

Testing the shortcode plugin

Quellcode

Yes please!

Any news? :)

krpano wordpress plugin - PanoPress

Ähnliche Themen