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 iPhone
Reel 1.1.3 is a jQuery plugin which takes an image tag and makes it a live "projection" of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash and Java techniques.
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).
NEW
In response to the mouse activity, the images reel their contents frame by frame. Indicated by a black square sliding alongside the edge(s). If not, either some downloading momentarily failed so try it again first. Or something terrible went wrong. In that case we would love to know it so please do report a bug
Reel also supports stitched panorama style view:
Photos credits: RC formula by Erik Kluka | Mini Cooper S by PhotoSpherix | Moro Rock, Giant Sequoia National Park, California USA by Henning Leweke (cc)
Please note that the above images are scaled down to about 50% of their real-life size in order to save bandwidth.
Many examples plus code reside in tests in the Sampler »
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
Reel has a handful of options you can use to override the default values.
| type | option | default | |
|---|---|---|---|
| jQuery | area | undefined | NEW Use jQuery to extend the area sensitive to mouse or touch interaction. Will use the area of the image if left undefined. |
| Number | brake | 0.5 | NEW Braking force applied when slowing down the free spinning when dragged and thrown. |
| Boolean | clickfree | false | NEW Binds to mouse leave/enter events instead of down/up mouse events. |
| Boolean | cw | false | NEW 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 | -1 | NEW Delay before Reel starts rotating by itself in seconds (no auto-play by default (-1)). |
| Boolean | directional | false | NEW Two sets of frames are used when true. One set for forward followed by one for backward motion. |
| Boolean | draggable | true | NEW Allows mouse or finger drag interaction when true (allowed by default). |
| Number | entry | undefined | NEW 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 | NEW 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. |
| jQuery | hotspot | undefined | DEPRECATED Use area instead. |
| String | image | undefined | NEW Allows to override default sprite resolution based on IMG src filename by passing the path to the image sprite directly. |
| Array | images | [] | NEW When sprite image is too memory-intensive you can revert to using a sequence of individual images instead. |
| Number | indicator | 0 | Can display a range progress indicator inside the image. By passing a positive value in pixels a black square marker will stick to the bottom edge of your image. Customize the color by CSS. Its class name is jquery-reel-indicator (use !important to override the black) |
| Boolean | inversed | false | NEW 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 jquery-reel base class. | |
| Number | laziness | 8 | NEW on "lazy" devices tempo is divided by this divisor for better performace. |
| 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 | NEW 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 jquery-reel-monitor |
| Number | opening | 0 | Duration of opening animation (in seconds). |
| Number | orbital | 0 | NEW View centering tolerance (in frames) for dual-orbit object movies. |
| String | path | undefined | NEW URL path to be prepended to either `image` or `images` filenames. |
| Number | preloader | 4 | NEW 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 jquery-reel-preloader |
| Number | rebound | 0.5 | NEW Time spent on the edge (in seconds) of a non-looping panorama before it bounces back. |
| Boolean | reversed | false | DEPRECATED Use cw instead. |
| Number | revolution | undefined | NEW Distance mouse must be dragged to cause one full revolution (when undefined, defaults to double the viewport width or half the `stitched` option). |
| Number | row | 1 | NEW Initial row for multi-row setups (see rows for more). |
| Number | rows | 0 | NEW Number of rows for a multi-row setup (default 0 means single-row setup). |
| Number | spacing | 0 | Spacing between frames on the sheet (in pixels). |
| Number | speed | 0 | NEW Animated rotation speed in revolutions per second (Hz). Animation is disabled by default (0). |
| Number | step | undefined | NEW Initial step (overrides `frame`). See steps for more. |
| Number | steps | undefined | NEW Number of steps a revolution is divided into (by default equal to `frames`). |
| 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 | NEW Shared animation ticker tempo in ticks per second. Doesn't affect the speed. |
| Number | timeout | 2 | NEW Idle timeout after which animation is resumed (in seconds). |
| Boolean | throwable | true | NEW Allows drag & throw interaction (allowed by default). |
| String | tooltip | DEPRECATED Use hint instead. | |
| Boolean | vertical | false | NEW Switches orbital object movie to vertical mode. |
| Boolean | wheelable | true | NEW Allows mouse wheel interaction (allowed by default). |
.jpg){kind=link}
