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.3 is an established and the most versatile three-sixty player for jQuery. Teaches your ordinary image tag some new tricks turning it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. Reel 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).
Stitched panoramas are supported too:
Moro Rock Lookout
1 Way Rd, Giant Sequoia National Park, CA
Panther Peak
Mount Silliman
Castle Rocks
Moro Rock
Ash Peaks Ridge
Milk Ranch Peak
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 19 examples incl. code samples
Photos credits: RC formula by Erik Kluka | Mini Cooper S by PhotoSpherix | Moro Rock, Giant Sequoia National Park, California USA by Henning Leweke (cc)
reel
to your HTML
<img>
and configure with
options
as data attributes:
<img src="/demo/green.jpg" width="168" height="126"
class="reel"
data-image="/demo/green-reel.jpg"
data-frames="32"
data-footage="4"
data-revolution="800">
Check out other options you can use and combine
* 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.
Please donate a little via Pledgie or PayPal to show your love and care :)
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
NEW
Forget syntax!
Add class
reel
to your
<img>
tag and Reel will pick it up automatically without need for writing any Javascript.
<img src... class="reel" id="my_picture">
Customize with options.
NEW
Optionally add class
reel-annotation
to any element in your HTML to place it "inside" the interactive image, synchronized with its motion.
<a href... class="reel-annotation"
data-for="my_picture"> My link </a>
Customize with annotations options.
NEW Use data attributes to customize options and shape up your Reel.
<img...
data-speed="0.5"
data-clickfree="true"
data-images="/photos/DSCN####.JPG|20..42">
A handful of options is available to be used to override the default values.
| type | option | default | |
|---|---|---|---|
| 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 | {} | 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 | 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 | duration | undefined | NEW Animation playback duration (in seconds). |
| 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. |
| Boolean | framelock | false | NEW In multi-row setup, this allows the frame to be locked in place leaving just the vertical interaction possible. |
| 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 | "" | 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. |
| Boolean | orientable | false | NEW Enables interaction via device's built-in gyroscope (if available). |
| String | path | undefined | URL path to be prepended to either image or images filenames. |
| String | preload | "fidelity" | 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. |
| Boolean | responsive | false | NEW If switched to responsive mode, Reel will obey dimensions of its parent container, will grow to fit and will adjust the interaction and UI accordingly (and also on resize). |
| 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 | 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 | rowlock | false | NEW In multi-row setup, this allows the row to be locked in place leaving just the horizontal interaction possible. |
| Boolean | scrollable | true | Allows page scroll (allowed by default; applies only to touch devices). |
| Boolean | shy | false | NEW In shy mode, Reel will preinitialize, but won't load until actually clicked. |
| 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). |
| Boolean | steppable | true | 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 | Maximal velocity when thrown. | |
| Number | velocity | 0 | 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 ). |
Learn more from the extensively annotated source code.
NEW Similarily, use data attributes to customize your annotations.
<a...
data-for="my_picture"
data-x="30,20,,,10"
data-y="70"></a>
Learn more about annotations in the wiki.
Suggest a feature too! I can't wait!
.reel(:event)
@W
,
@H
or
@T
) will get it substituted with actual
values (
width
and
height
data values or timestamp).
$.reel.substitutes
object for custom substitution methods.
$.reel.concurrent_requests
» Github issue
GH-237
image
and
images
data can now be changed on the fly » Github issue
GH-190
dimensions
replaced with
width
and
height
keys.
$.reel.touchy
distinction became obsolete and was removed » Github issue
GH-233
"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}
