jQuery Reel Plugin

Reel 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 techniques.

Intuitive operation. Supports mouse wheel!
No need for a stitched image but we do support them too.
Plays fair with your existing CSS.
Browser and operating system agnostic. It's your choice.
No browser extensions needed. No Flash, nothing. It's just an image...
Tiny code base. No carbon footprint!

Download jquery.reel.js

version 1.0.1, gziped, ~ 3,6kB

More download options...

Demonstration
News
How to?
Is it compatibile?
Is it free?
Download
Syntax
Options
Requirements
Known issues
Author
Next steps?

Demonstration

An image is worth a thousand words. And what about the moving one!

Try reel for yourself. Place your mouse pointer over images below. And roll your mouse wheel up/down or drag the image left/right.

In response to the mouse activity, the images should reel their contents. Indicated by a black square sliding alongside the bottom edge. 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

Please note that the above images are scaled down to about 50% of their real-life size.

Reel also supports stitched panorama style view:

Photo of Moro Rock, Giant Sequoia National Park, California USA by Henning Leweke (cc)

Latest news

2009-08-31: The Reel plugin version 1.0 is out. On top of the RC it now also supports classic-style stitched panoramas and many more. Inspect version change log for details.
2009-08-25: First release candidate is out!

How to?

You obviously have an image you want to make interactive in your HTML document.
Collect all rotation frames into a single reel sprite OR stitch them together
Link jquery.reel.js in your document.
And on the image use the jQuery method:

Is it compatible?

Runs everywhere!*
Positive tested in Safari 3+, Firefox 3+, Chrome and IE 5.5+.
Degrades gracefuly.

* Under the hood Reel uses mere CSS background image positioning which is pretty common in all today's browsers. No magic. Even Internet Explorer 5.5 is capable of it. Hence the extra wide compatibility.

Is it free?

Yes, of course! Take it, keep it, use it. It's free and open. Just like jQuery itself.
Available for use in all personal or commercial projects under both MIT and GPL licenses.

Download

Current version is 1.0.1 (from 2009-08-31)

Source (~ 8,6 kB)
Gziped version (~ 3,6 kB)
The whole ZIP package (~ 574 kB)

See change log for changes

Syntax

The syntax is pretty straightforward. The plugin exposes just one method: .reel([options])

Options

Reel has a handful of options you can use to override the default values.

type	option	default
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	35	Total number of frames.
Boolean	horizontal	true	Flow of frames on the sheet. Default is line-by-line rather than column-by-column.
jQuery	hotspot		Can use custom elements as a hotspot for mouse interaction. Will use the area of the image if left undefined.
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 indicator (use !important to override the black)
String	klass		You can pass your custom CSS class name for the plugin DOM node. It will accompany the fixed jquery-class base class.
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.
Boolean	saves	false	Can allow user to download the image (using browser's Save image as... feature). Note that only the image linked in the HTML can be saved that way.
Number	sensitivity	20	Each instance of the plugin apparently needs its own sensibility setting in terms of how responsive is the reeling to actual mouse movement. Default value of 20 is suitable for spinning objects (and stitched images) whereas situations with spinning camera (like looking around) values around 70 are more effective. Generally higher values mean lower sensitivity.
Number	spacing	0	Spacing between frames on the sheet (in pixels).
Number	stitched		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.
String	tooltip		Text hint for hotspot tooltip.

Requirements

Just the jQuery 1.3.x core library (if you don't have it already)
And the jQuery.reel
Optionaly you can also include these handy jQuery plugins (recommended)
- jQuery.mouseWheel will enable mouse wheel interaction
- jQuery.disableTextSelect will retain mouse dragging interaction when saving the image is enabled

Known issues

In older browsers the suggestive mouse cursor does not appear because of lack of support for CSS cursor value of horizontal resize.
In Google Chrome users of the Apple Mighty Mouse may experience a overdone reaction on mouse wheel (ball) scrolling.
In Chrome on MacOS when a CSS border is applied to the image its own scrolling performance significantly decreases. [working on that]
Report an issue!

Author

Comming from the Czech Republic
Petr Vostřel alias PISI has developed and maintains this plugin
Mail me on petr(at)vostrel(dot)cz
Suggestions and bug reports are more than welcome on the official jQuery plugin project page

Next?

Implicit activation to lower the bandwidth cost when there's no action from the user.
Self-rotation via an auto-play feature.
Image dimensions detection when nothing specified on HTML tag.
Reel as a form input element.
Suggest a feature! I can't wait!

Changelog

Version 1.0.1

Support for more classical stitched panoramic images added the stitched option accepting pixel length (width) of stitched panoramic reel image.
Mouse wheel sensitivity handling was improved.
Indicator now displayed without any extra CSS.
Fixed corrupted detection of movement direction.
Added new sensitivity option which enables control over sensitivity of mouse interaction.
Polishing options.
- Added tooltip option to allow custom tooltip instructions to be displayed on hotspot(s).
- The panorama option has been removed.
- Added klass option to allow custom CSS class on plugin instance.
- Option suffix default value changed from "-sheet" to "-reel".
- Option save corrected to saves
Added new hotspot option accepting a jQuery. It allows binding mouse interaction events to custom DOM node.

Initial version 1.0 RC