New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click on image to step #20

Closed
pablosbrain opened this Issue Mar 3, 2011 · 5 comments

Comments

Projects
None yet
2 participants
@pablosbrain

Feature Request: Click either half of an image to go to the next or previous frame

Similar to the navigation in some lightbox image gallery displays, make it possible to click once without dragging on either side of the image to step through the frames.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Mar 4, 2011

Owner

Nice one, Pablo! Interesting suggestion, indeed. Thank you very much for it. It fits very nicely my future vision of Reel. I also expect some UI elements like arrow buttons sticked to both left and right edges of the image to visually support such possibility. Stay tuned for future versions. It probably won't be inside the upcomming patch release 1.1.1, but it certainly will be in 1.2.

Owner

pisi commented Mar 4, 2011

Nice one, Pablo! Interesting suggestion, indeed. Thank you very much for it. It fits very nicely my future vision of Reel. I also expect some UI elements like arrow buttons sticked to both left and right edges of the image to visually support such possibility. Stay tuned for future versions. It probably won't be inside the upcomming patch release 1.1.1, but it certainly will be in 1.2.

@ghost ghost assigned pisi May 8, 2011

pisi added a commit that referenced this issue Nov 26, 2011

Added a `steppable` option, which when true allows to step the instan…
…ce by one frame #20

Default value is false. The direction of the movement then depends on the horizontal distance from image center.
A `panned` private switch takes care of eliminating unwanted click event after even brief mousemove has happened.
It triggers either `"stepLeft"` or `"stepRight"` events.

pisi added a commit that referenced this issue Nov 26, 2011

Added handlers for `"stepLeft"` and "`stepRight"` events #20
Even with `steppable: false` these two events are still available in the API.

pisi added a commit that referenced this issue Nov 26, 2011

Removing double click binding #20
It tended to start playing after two quicky successive step clicks.
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 26, 2011

Owner

The implemented a solution for this feature request, that has two distinct aspects:

  1. As @pablosbrain requested the entire image area is now clickable and depending on the click position relative to the image center, it triggers either "stepLeft" or "stepRight" event. This is enabled by default and can be disabled by setting new option steppable to false.
  2. And that brings us to the new events - "stepLeft" and "stepRight". These two when .trigger()ed they advance Reel instance one frame left or right. Events are available even when steppable: false.
Owner

pisi commented Nov 26, 2011

The implemented a solution for this feature request, that has two distinct aspects:

  1. As @pablosbrain requested the entire image area is now clickable and depending on the click position relative to the image center, it triggers either "stepLeft" or "stepRight" event. This is enabled by default and can be disabled by setting new option steppable to false.
  2. And that brings us to the new events - "stepLeft" and "stepRight". These two when .trigger()ed they advance Reel instance one frame left or right. Events are available even when steppable: false.
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 27, 2011

Owner

The code was merged into development branch

Owner

pisi commented Nov 27, 2011

The code was merged into development branch

@pisi pisi closed this Nov 27, 2011

@pisi pisi reopened this Dec 12, 2011

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Dec 12, 2011

Owner

Gregory Stewart reported: "one thing I noticed with the stepping is that when I use it with the option to reverse the direction of my slides ({cw : true}) the built-in stepping ignores it and uses the default direction."

Owner

pisi commented Dec 12, 2011

Gregory Stewart reported: "one thing I noticed with the stepping is that when I use it with the option to reverse the direction of my slides ({cw : true}) the built-in stepping ignores it and uses the default direction."

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Dec 23, 2011

Owner

I'm a bit baffled by Greg's report, because as far as I tested it, if setup right, if clicking the left half causes a default counterclockwise motion and vise versa. If cw: true the reaction is the same - left click for counter-clockwise. So it works just as expected.

I think it may be just a matter of cw option misuse. The cw option is not for reversing the direction. It is there to tell Reel in what manner you have your shots organized, how (in which direction) you took your pictures. You can not deliberatly change this value as it is either this or that depending on the images. Reel assumes a counter-clockwise order of the frames. Rule of the thumb is, that when you setup your Reel and while dragging, the object or the scene does not follow the mouse when dragged, you need to use the cw option to correct Reel's assumption.

Owner

pisi commented Dec 23, 2011

I'm a bit baffled by Greg's report, because as far as I tested it, if setup right, if clicking the left half causes a default counterclockwise motion and vise versa. If cw: true the reaction is the same - left click for counter-clockwise. So it works just as expected.

I think it may be just a matter of cw option misuse. The cw option is not for reversing the direction. It is there to tell Reel in what manner you have your shots organized, how (in which direction) you took your pictures. You can not deliberatly change this value as it is either this or that depending on the images. Reel assumes a counter-clockwise order of the frames. Rule of the thumb is, that when you setup your Reel and while dragging, the object or the scene does not follow the mouse when dragged, you need to use the cw option to correct Reel's assumption.

@pisi pisi closed this Dec 23, 2011

pisi added a commit that referenced this issue Dec 30, 2011

1.2 ALPHA is out!
Just missing annotations examples - the'll be in the beta.

Changes:

* Non-`wheelable` Reels now allow scrolling of the page when wheeling above the Reel instance.
* New option `attr` allows to set custom attributes of the IMG tag (useful for re-using DOM nodes).
* Instances being re-instantiated now perform automatic teardown (GH-62).
* Proper image preload events unbinding on teardown (GH-64).
* Option `scrollable` can disable page scrolling (if needed) on touch devices.
* New event `"openingDone"` now announces the end of opening animation (GH-65).
* Internal event `slide` renamed to `pan` (GH-51).
* Actual frame number is manifested with a wrapper class name, e.g. `frame-8` (GH-69).
* Improved order of preloaded images gradually increasing fidelity of the image, thus the name `"fidelity"` and this mode is now default. The former order is designated `"linear". Preloading mode is chosen by new `preload` option accepting a mode name. (GH-10).
* Deprecated options `hotspot`, `tooltip` and `reversed` have been removed.
* Bare click on left/right half of the image steps the Reel one frame forward/back. Set `steppable` to false to disable. Comes with `"stepLeft"` and `"stepRight"` events (GH-20).
* Custom text/graphics can augment the frames using the brand new `annotations` feature (GH-36).
* New complementary `.unreel()` function to revert effects of `.reel()` on the DOM.
* Control event `play` now accepts optional `speed` parameter.
* Mouse cursor is now customizable with the new `cursor` option. The new failsafe cursor is now `"move"`.

pisi added a commit that referenced this issue Jul 16, 2012

Reel 1.2
========

Lovely new features:
* in-picture annotations
* new image preloading method
* frame by frame stepping
* new data change model
* full documentation
* jQuery 1.5+

New options:
* `annotations`, `attr`, `cursor`, `steppable`, improved `images`

New events:
* `stepLeft`, `stepRight`, `openingDone`, improved `play`

New methods:
* `.unreel()`, improved `.reel()`

Includes fixes for issues #10, #20, #36, #51, #62, #64, #65, #69, #103, #110, #111, #113, #115, #117, #122, #124, #125, #126

Enjoy!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment