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

    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

    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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

    Code
    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

  • 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

  • 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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!