reel
verb- ...
- the room reeled GO ROUND, go round and round, whirl, spin, revolve, swirl, twirl, turn, swim.
Try dragging this area or roll your mouse wheel over it Now even on Android
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.
and
Github
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
* 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.
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
There also is
.unreel()
method to undo
.reel()
and global
$.reel
namespace.
See documentation
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; requires external mouse wheel plugin ). |
See the fully annotated source code for more details on options, events and all that jazz.
"loaded"
event (instead of
"setup"
) » Github issue
GH-142
src
attribute of the
<img>
$.reel.cdn
setting customization now working correctly » Github issue
GH-124
.unreel()
function to revert effects of
.reel()
on the DOM.
.jpg){kind=link}
