ProtoFlow - Now supports Keyboard and Mouse Wheel Events!
March 31st, 2008 | Published in Javascript, Projects, ProtoFlow, Prototype, Scriptaculous | 12 Comments
Well it doesn’t get any better than this. I have been over whelmed by the response that community has given to ProtoFlow. While I am still working to fix some issues with image positioning, Fabian and Martin posted a add-on for keyboard and mouse wheel support. After integrating their code I had to release it to general public asap. Thank you guys for your contribution.
By default both keyboard and mouse wheel support is turned on. To turn keyboard support off you can set options: enableKeyboard to false and to disable the mouse wheel events just turn enableMouse to false. Notice how the mouse wheel effect only works when your mouse is over the ProtoFlow object.
The latest code should be up here.
April 8th, 2008 at 8:48 am (#)
Hey, sorry I was away for a while because I had a look at another implementation called ImageFlow. It works a bit more stable but the code is ugly
The new navigation code is great. However I would tweak it:
if(this.options.enableKeyboard) {
document.observe(’keyup’, (function(e) {
var code = e.keyCode;
if(37 == code) {this.previous(); Event.stop(e);}
if(39 == code) {this.next(); Event.stop(e);}
}).bind(this));
}
You should stop the event. I have a page layout that somehow magically scrolls to the right (even if there is no scrollbar to that and without ProtoFlow it also would not scroll right on right arrow
I noticed that you get a different image behaviour when you turn reflection on and off. With reflection being off all images get resized to a square, with reflection I got the original image size. But the images were top aligned rather than bottom (but that acutally did not bother me its also looking neat when you turn the slider off)
For now I am prototyping on ProtoFlow and migtht bring you some more suggestions (especially for lightbox integration :-))
April 8th, 2008 at 8:50 am (#)
gnarf. it has to be “keydown” to make Event.stop(e); work correctly
April 8th, 2008 at 9:13 am (#)
Oh that was fast,
seems that other changes from you made it a lot easier:
handleClick: function(e){
var elem = Event.element(e);
var v = elem.getAttribute(”index”);
if (!v && this.options.useReflection) {
elem = elem.up(’a');
v = elem.getAttribute(”index”);
}
if (this.currIndex != v){
Event.stop(e);
this.currIndex = v;
this.goTo(v);
this.updateSlider(v);
}
},
I introduced that “this.currIndex != v” check for two purposes:
Performance: do not scroll to an element you are at already.
Lightbox Integration: Actually neat also for other purposes. If we do need to scroll then the image was not centered and we want to stop other actions on the image. If it was, the action goes through.
So click to scroll and click to lightbox nicely playing together.
April 15th, 2008 at 4:18 am (#)
hi everybody.
First, this a great script ! thank you for your work.
I use this script and all my images are linked to product pages.
But i want to let users slide with the mouse click. So i had to enable the enableOnClickScroll flag.
But how can i enable link on the focused image ?
So, how to disable links except for the focused image.?
Sorry for my englsh , i’m french ..
Thanks by advance.
Bruno
April 15th, 2008 at 7:34 am (#)
hi, i made a small protoflow powered (and google image serach powered) image search engine
please check it out, feedback welcome, great js, i had to tweak it here and there
http://www.creativspace.at/
April 21st, 2008 at 4:54 am (#)
creativspace.at just made it to the TechCrunch home page.
http://www.techcrunch.com/2008/04/21/a-better-interface-for-image-search/
I posted a comment with the link to ProtoFlow, which I already used in a site of mine (http://www.netgamestech.com/screenshots/ no tweaking required).
April 21st, 2008 at 7:22 am (#)
[…] to google images, google api, prototype, protoflow, script.aculo.us, firefox, firebug, webdeveloper toolbar Link 2.0: These icons link to social […]
April 22nd, 2008 at 9:37 am (#)
Great work Paolo! That looks amazing ..
April 25th, 2008 at 5:57 pm (#)
The ‘Flow’ is such an elegant display; thanks for sharing your work.
I asked the following question in both the ImageFlow and LightFlow sites, but haven’t heard back - perhaps you could figure out the way to do this?:
Rather than just plain images such as photos, would it be possible to add an embedded object such as a video? When I embed a YouTube video on a web site, for instance, the site is served a preview image and then the video when that image is clicked. This seems to me to be consistant with the philosophy here: show a bunch of previews and click on the one you want.
How would you do that?
April 30th, 2008 at 1:11 pm (#)
Hi
I just noticed that on the protoflow demo page as well as on my downloaded version, the links are not actually being opened/launched. Hovering over the image with focus does correctly display the HREF, but clicking it doesn’t do anything…
Interestingly, the links seem to work as expected on creativespace.
Any help would be apprciated.
Thanks
May 5th, 2008 at 1:05 am (#)
hi, i tweaked - the code a bit (matched to my site and the use i intended it for). now if you click on a picture it gets the focus -> scrolled into the middle. when it is in there, the default behavior of the click (follow the link) is enabled. would love to see this feature default in the code.
May 5th, 2008 at 6:53 am (#)
Franz.. if you want to contribute to the project feel free to email me and we can get your changes merged.
I really like the way you have implemented the script!