FAQ

These are questions which pop up more often than any other

I’m experiencing weird scaling down of my image on iPhone or iPad. Why’s that?

This is often exhibited by several frames of sprite appear on screen at once.
As a result of iPhoneOS memory limitation imposed on image dimensions, your image sprite gets scaled down to fit in memory. In that case you have several options:

• you can make your sprite smaller,
• or use sequence of individual frames instead. Unfortunatelly this comes with a penalty of downloading several images instead of just one.

Will Reel work on my Opera Mini?

There are profound differences in how Opera Mini handles Javascript which render this browser insensitive to some key interaction events Reel is using. That’s why Reel unfortunatelly doesn’t and won’t work in Opera Mini. However it works very well in Opera Mobile, other mobile browser by Opera.

When I manually remove the DOM node Reel is running in, I’m then unable to initialize another Reel in the same place. Am I doing something wrong?

Not really. Let me explain. Reel maintains a list of its instances in the document (you can peek in it in $.reel.instances). The direct removal of the DOM node does indeed kill the running instance, but doesn’t clear the record from this list, and its ongoing presence then prevents you from re-initializing the instance. Make sure to .trigger("teardown") event on the instance first. The “teardown” event effectively tears down the running Reel instance structure along with the list entry and reconstructs the original naked IMG node. Then, you can switch the node’s src and do .reel() all over again.

Is there a way to create the image sprite for Reel easily? I mean any software?

There isn’t any full blown software or a complete tool (at least to my knowledge ~ contributions are warmly welcome! :). There are however few community-contributed utilities to help you out with Reel-replated tasks. Most notaby the image processing script in Python for combining images into sprites by Josh Gourneau.

I’m struggling to use my own preloader. How to apply my style on it?

Preloader node has a class name "jquery-reel-preloader". You can use the class name to apply any style you like on the node. As Reel sets few properties on its own (the color, the size, the growing effect), you would need to use the !important CSS directive on some of them. For example, this would result into fixed width half opaque greenish preloader.

.jquery-reel-preloader {
    background: green !important;
    width: 50px !important;
    opacity: 0.5;
}