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!
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?
- You obviously have an image you want to make interactive in your HTML document.
- Collect images of your scene into a single reel sprite (you can use individual files too) OR stitch them together
- Link jquery.reel.js in your document.
- 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' })
- This will simply make it reel:
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.
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 :)
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:.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
- Just the jQuery 1.5+ library (if you don't have it already)
- And the jQuery.reel
- If you'd like to interact with mouse wheel too, also include one of these:
- jQuery.mouseWheel (recommended)
- or jQuery.special.event.wheel
Author
- Coming from the Czech Republic
- Petr Vostřel alias „PISI” has developed and maintains this plugin
- Mail me on petr(at)vostrel(dot)cz
- Suggestions, feature requests or bug reports are more than welcome on the jQuery Reel issue tracker
Next?
- Animation disable when not visible within the viewport.
- Gyroscope hardware support.
- Zooming in and out of the picture.
- Implicit activation to lower the bandwidth cost when there's no action from the user.
- Reel as a form input element.
- Image dimensions detection when nothing specified on HTML tag.
- NEW ✓ True clickable hotspots in the image.
- ✓ Dual-orbit object movies.
- ✓ Opening show-off animation.
- ✓ Image sequence instead of filmstrip.
- ✓ Multi-row object movies.
- ✓ Self-rotation via an auto-play feature.
- Suggest a feature too! I can't wait!
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
srcattribute 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.
Courtesy: http://jquery.vostrel.cz/
0 comments:
Post a Comment