Panoscoper

EDIT: I’ve ported development over to Google Code, the API below is outdated.

Check out the newest version HERE

Check out my post about it HERE

For the past month I’ve been working toward a greater project called “Envi”. Essentially it’s a wordpress theme which will allow people to create “Myst” like environments using an array of free tools. The first step toward this ultimate goal is the Panoscoper plugin which is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. For this 1.0 release, the options are quite simple:

  • framewidth:
    • The width of the viewing frame
    • Default is 4:3 ratio of height
  • frameheight:
    • The height of the viewing frame
    • Default is object height
  • offsetview:
    • The offset to start viewing from
    • Default is 0
  • speed:
    • The amount of movement
    • Default is 80
  • compass:
    • Use the compass to indicate direction
    • Default is true
  • compassIMG:
    • Set the location of the compass image
    • Default is ‘compass.png’

Heres a demo:

$("#baltimore").panoscope({frameheight:600,framewidth:500});


Used with Attribution from http://www.flickr.com/photos/inju/4452949140/

Heres a test using a vimeo video, not very functional yet but you get the idea

$("#vimeotest").panoscope({

frameheight:400,

framewidth:400,

offsetview:1000

});


360° Panorama CGI Movie // Part 02 / Panorama from Storz & Escherich on Vimeo.

Future Enhancements:

  • CSS Bulletproofing
  • Panning up and down
  • Image overlays
  • Vimeo Detection and Autoplay of clone.
  • Compass offset
  • Minimap

Not tested in Internet Exploder, be warned.
P.S. iPad, iPhone, iPod Touch Compatible!

Download: jQuery Panoscoper v0.1

Also, go to the panoscoper jquery plugin page at http://plugins.jquery.com/project/Panoscoper

Creative Commons License

This entry was posted in Panoscoper. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

  1. Daniel Paez
    Posted September 28, 2010 at 10:47 am | Permalink

    This is a really nice plugin, thanks!

  2. Posted September 28, 2010 at 6:47 pm | Permalink

    Nice one, I am going to share it on my tech blog at http://www.greepit.com

    Regards,
    Sarfraz

  3. Graeme Melia
    Posted September 28, 2010 at 10:09 pm | Permalink

    I have submitted this page to Stumble!. Looks good.

  4. Розина
    Posted September 30, 2010 at 12:23 pm | Permalink

    У вас только 1 сайт – “artimore.com” и все ?

8 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*