Menu
» »Unlabelled » 360° object movie, panorama or stop-motion animation.


Reel 1.2.1 is an established jQuery plugin which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. It is the premier alternative to Flash, Java or Quicktime and is trusted by government agencies and big brands like BMW, Nikon, O2, Blackberry or The New York Times.
  • Animated rotation and inertial motion.
  • NEW In-scene annotations (hotspots) in sync with frames.
  • Intuitive operation. Supports both mouse and touch.
  • Apple, Blackberry and NEW Android mobile devices supported.
  • Nearly 50 options for full customization.
  • Browser and operating system agnostic. Flash-free. It's just an image...
  • Loves your existing CSS.
  • Transparent, NEW documented, eventful & well-tested tiny code base.
  • Tools for Drupal , NEW Joomla , Dreamweaver , Poser or Python by the loving community!
  •          

Download jquery.reel.js

version 1.2.1, minified, gziped, CDN, ~ 7.8 kB
More download options...

Demonstration

An image is worth a thousand words. And how about an interactive one!
Try reel for yourself. Place your mouse pointer over images below. And roll your mouse wheel up/down or drag the mouse left/right (or even up/down).
Reel also supports stitched panorama style view:
NEW You can also embed annotations (e.g. text or images) of individual features on the scene. Annotations are available for all operational modes and are synchronized with Reel's motion.
See all the examples »
Photos credits: RC formula by Erik Kluka | Mini Cooper S by PhotoSpherix | Moro Rock, Giant Sequoia National Park, California USA by Henning Leweke (cc)
If you've experienced a glitch and the above images were not interactive, loading may have failed. If the problem happens to persist, I would love to know it, so please do report a bug

How to?

  1. You obviously have an image you want to make interactive in your HTML document.
  2. Collect images of your scene into a single reel sprite (you can use individual files too) OR stitch them together
  3. Link jquery.reel.js in your document.
  4. And on the image use: .reel([options]) Examples for an IMG tag id "my_image": <img src="image.jpg" width="400" height="300" id="my_image">
    • This will simply make it reel: $('#my_image').reel()
    • Don't have 36 frames? 27, you say? No problem: $('#my_image').reel({ frames: 27 })
    • Want to use your own CSS class? There's an option for just that: $('#my_image').reel({ klass: 'MyThreeSixty' })
    Check out other options you can use and combine

Is it compatible?

  • Runs everywhere!*
  • Positively tested on desktops in Safari 3+, Firefox 3+, Chrome, IE 6+ and Opera 9+.
  • Positively tested on mobile devices by Apple, Blackberry and Android 2.3+.
  • Degrades gracefully.
* Under the hood Reel uses nothing else than CSS background image positioning which is pretty common in all today's browsers. No magic. Even ancient Internet Explorer versions are capable of it. Hence the extra wide compatibility. See detailed report.

Is it free?

Who uses it?

  • Everybody!
  • Reel runs on hundreds of websites all around the world at universities, museums, government agencies and all kinds of commercial enterprises.
  • Powering the popular YouSpin service.
  • And is used by many global brands:

Latest news

2013-02-23
NEW Reel 1.2.1 fixes compatibility issues with latest version of jQuery (up to 2.0 beta actually) and besides some sweet refactoring achievements (new tricks with virtually no file size growth) brings new exciting multi-row panoramas option, extended throw control and some more.
2012-09-10
The CDN has run dry today and was rejecting requests. The full service was resumed to normal at 17:30 GMT (btw. that's where your generous donation money go). Deep apologies for any inconvenience. If you'd like to help prevent such outages in future, please donate.
2012-07-16
Brand new Reel 1.2 is OUT with so many closed tickets landed in this release. It brings Android compatibility (yay!), in-picture annotations, simplified image sequences, much improved preloading, stepping by clicking, dry examples, lots of embedded code documentation, few other new options and many big or small fixes. Enjoy! :) You can download it directly, the CDN will serve the new version as of Wednesday 18th.
2012-02-27
In the meantime Reel 1.1.4 rushes in to resolve IE issues related to jQuery 1.7.
2012-02-17
Development of the new version of Reel has reached the public beta testing phase. If you'd like to preview and test, please grab the beta code at Github and feel free to report back.
2012-01-25
Reel usage has truly flourished since the last news and now well over 100 websites around the globe have put their trust into Reel. Be it Blackberry, Honda, BMW, Adidas, Diesel or BASF, you name it. To showcase these, Reel got its own Google+ page and each week one site is picked and featured there. Do not miss! Also, even better version 1.2 is just around the corner :)
Expand older news »

Download

Current version is 1.2.1 (from 2013-02-23)
You can shave off more then half of the size by having the files served from CDN locations instead of downloading.
See change log for changes

Syntax

The syntax is pretty straightforward. The plugin exposes just one key method: .reel([options]) There also is .unreel() method to undo .reel() and global $.reel namespace.
See documentation

Options

Reel has a handful of options you can use to override the default values.
type option default
Object annotations undefined NEW Definition object laying out in-picture annotations which are synchronized with the Reel. Consult Annotations in the wiki.
jQuery area undefined Use jQuery to extend the area sensitive to mouse or touch interaction. Will use the area of the image if left undefined .
Object attr {} NEW Initial attribute-value pairs map for the IMG tag. Useful for dynamically setting up image dimensions.
Number brake 0.23 Braking force applied when slowing down the free spinning when dragged or thrown.
Boolean clickfree false Binds to mouse leave/enter events instead of down/up mouse events.
String cursor undefined NEW Mouse cursor overriding the default one. You can use either hand for a grabbing palm of hand or any valid CSS `cursor` value. Reel's cursors are by default served by Reel's CDN .
Boolean cw false If your Reel image motion doesn't follow the mouse when dragged (moves in opposite direction), set this to true to indicate clockwise organization of frames.
Number delay 0 Delay before Reel starts playing by itself (in seconds).
Boolean directional false Two sets of frames are used when true - one set for forward followed by one for backward motion.
Boolean draggable true Allows mouse or finger drag interaction when true (allowed by default).
Number entry undefined Speed of the opening animation in Hz. Defaults to value of speed option.
Number footage 6 Number of frames per line (when horizontal) or per column (when vertical).
Number frame 1 Initial frame. Plugin instance starts with this frame. Frame 1 is the top left corner of the image. Thus loaded with the highest priority (as all frames in the top row not matter if horizontal or vertical).
Number frames 36 Total number of frames.
Function graph undefined Custom graph function.
String hint "" Text hint for hotspot tooltip.
Boolean horizontal true Flow of frames on the sheet. Default is line-by-line rather than column-by-column.
String image undefined Allows to override default sprite resolution based on IMG src filename by passing the path to the image sprite directly.
String images "" NEW Filename string for series of images like `"image_###.jpg"`, where the `#` counter placeholder is replaced with an actual counter numbers. This is much faster than the alternative Array notation.
Array images [] You can also define images as a raw Array to gain complete control.
Number indicator 0 Can display a range progress indicator inside the image. By passing a positive value in pixels a black rectangle marker will stick to the bottom edge of your image. Customize the color by CSS. Its class name is reel-indicator
Boolean inversed false Flags inversed organization of frames in orbital object movie.
String klass "" You can pass your custom CSS class name for the plugin DOM node. It will accompany the fixed reel base class.
Number laziness 6 On "lazy" devices tempo is divided by this divisor for better performance.
Boolean loops true Can be used to suppress default wrap around behavior of the sequence. Use this option when your captured sequence is a incomplete revolution.
String monitor undefined For development you can monitor any stored value in the upper left corner of the viewport by passing its name. Customize it using CSS. Its class name is reel-monitor
Number opening 0 Duration of opening animation (in seconds).
Number orbital 0 View centering tolerance (in frames) for dual-orbit object movies.
String path undefined URL path to be prepended to either image or images filenames.
String preload "fidelity" NEW Preloading mode affecting the order of images loaded. linear gives you loading from number 1 to the last frame, whilst fidelity produces more evenly spread-out order.
Number preloader 4 Size (height) of a image loading indicator (in pixels). Indicator appears along the bottom edge of Reel image when using images sequence. Customize it using CSS. Its class name is reel-preloader
Number rebound 0.5 Time spent on the edge (in seconds) of a non-looping panorama before it bounces back.
Number revolution undefined Distance in pixels the mouse must be dragged to cause one full revolution (when undefined it defaults to double the viewport width or half the stitched option).
Object revolution undefined NEW For multi-row movies you can optionally define individual revolutions for both x and y axis.
Number row 1 Initial row for multi-row setups (see rows for more).
Number rows 0 Number of rows for a multi-row setup (default 0 means single-row setup).
Boolean scrollable true NEW Allows page scroll (allowed by default; applies only to touch devices).
Number spacing 0 Spacing between frames on the sheet (in pixels).
Number speed 0 Animated rotation speed in revolutions per second (Hz). Animation is disabled by default (0).
Number step undefined DEPRECATED Use frame instead.
Number steps undefined DEPRECATED Use frames instead.
Boolean steppable true NEW Allows to step the view (horizontally) by clicking on image.
Number stitched 0 Pixel width of stitched panorama image. If supplied the default frame-by-frame behavior changes to panoramic behavior which works with the classic style panorama.
String suffix "-reel" A portion of the sheet filename inserted right before image type extension. For example, for an image /path/to/image.jpg the sheet will be /path/to/image-reel.jpg by default.
Number tempo 25 Shared animation ticker tempo in ticks per second. Doesn't affect the speed.
Number timeout 2 Idle timeout after which animation is resumed (in seconds).
Boolean throwable true Allows drag & throw interaction (allowed by default).
Number throwable NEW Maximal velocity when thrown.
Number velocity 0 NEW Initial velocity of user interaction; washes off quickly with brake .
Boolean vertical false Switches orbital object movie to vertical mode.
Boolean wheelable true Allows mouse wheel interaction (allowed by default).
See the fully annotated source code for more details on options, events and all that jazz.

Requirements

Known issues

Author

Changelog

Version 1.2.1
  • Resolved compatibility issues with jQuery 1.8 and 1.9 » Github issues GH-140 174 and 175
  • For smooth velocity kick it now follows "loaded" event (instead of "setup" ) » Github issue GH-142
  • Goodbye disableTextSelect dependency. You served well, but one less to worry about without you!
  • Vertical page scrolling on touch devices fixed » Github issue GH-146
  • Release package now contains image assets otherwise served by CND » Github issue GH-144
  • Case in-sensitivity for image extension in src attribute of the <img>
  • Exciting new multi-row panoramas via combination of multirow and stitched options » Github issue GH-129
  • The throwable option can now accept maximum velocity instead of simple boolean » Github issue GH-172
  • Fixed images sequence starting point now allows direct use of file names from camera.
Expand entries for older versions »

Courtesy: http://jquery.vostrel.cz/
Posted by Sri Lanka Best One
at 2:42 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top