Row (and frame) lock options for multi-rows

[pisi]

Split from #190 by @gnatok:

Can I move only horizontally in multi-row sprite and programmatically change number of row?

Thanks

[pisi]

You can bind to rowChange event and check if the row didn't deviate from the desired row number. If it does, set it back with .reel('row', _row_number_here_). It won't be pretty though.

  $('#my_image').reel({
    // business as usual
  });
  var desiredRow = 2;
  $('#my_image').bind('rowChange', function(e, nothing, row){
    if (row != desiredRow){
      $('#my_image').reel('row', desiredRow);
    }
  });

However, a useful option it would be, row lock and similarly frame lock too. This is however an API change, so first chance is the next minor release 1.3.

[pisi]

Two new options to help you (and others of course!) achieve a lock of frame or row in multirow movies (not limited to multirow at all) - framelock and rowlock. Both are Boolean and default to false, which means no lock. When either of them is set to true the direct mouse interaction is disabled and only programmatic frame or row change is available to be triggered by your custom UI elements using .reel( key, value ) like so:

$('#my_image').reel('row', 2);
// or
$('#my_image').reel('frame', 5);

Please note, that even despite framelock: true animated setups will still animate. Only the mouse interaction is affected.

This involved an API change so this will land in 1.3. In the meantime please use code from the gh-191-locks branch.

[gnatok]

@pisi Very nice. But imagine situation when on your page you have 2 instances of reel that use one source, but for the first inst. you need to show only first row, for second one you need to show all rows but starts from 2 row(only restrict to show 1 row).
For first:
rows: [1]
.
For second
rows: [2,3,4,5]

Like before/after simulation with one source

P.S
This is ONLY PROPOSAL. For me enough what Reel has now :).

[pisi]

In such an edge case, lock like this won't help any you will have resort to one of the following:

1. Have one single-row (before) and one multi-row setups (after) and re-initiate Reel when switching from one to the other
2. Keep the one multi-row setup you have now (before+after) and keep the row in check manually using the rowChange handler as described earlier above.

[pisi]

Released today as part of v1.3.0