Small update to ProtoFlow.
March 26th, 2008 | Published in Javascript, Projects, ProtoFlow, Prototype | 14 Comments
I have released another small update to the script. It has now been tested in IE6 and IE7 along with Firefox 2.0 and Safari. I have also added docs to the project.
I think this script should be in stable condition now. If you stumble upon any bugs or have any suggestions please post them in your comments to this thread.
You can find the latest version for download here.
March 28th, 2008 at 12:10 pm (#)
Hey, thats sooo cool.
I love it.
But I also have two issues:
a) I want to use it for images of different sizes. That seems not to work “beautiful”. I assume some dimensions are calculated on (the first) image and pixels set accordingly. Any good ideas?
I want to combine it with the light box. basically scroll throug thumbnails and on click an the caption open lightbox (alternativly on click of the image)
I will let you know when I have good ideas for this
Fabian
March 28th, 2008 at 2:08 pm (#)
Okay,
played a while with it. I got lightbox support to work. The Resizing is secondary for me ath the moment. Here my ideas:
- add link support. This is how I did it:
- I introduced a “a” element around the captionHolder.
- I changed the disableLinks to set onclick=return false instead of removing the url. (perhaps setting inline onclick is hacky but quick and works)
- In goTo I added a line grabbing the href from the link at current index and setting it to the a wrapper around the caption holder
- I also add text like “Picture” in front of the caption, so there is a text to click even without caption.
- For lightbox to work I just added the rel=lightbox to the a link wrapper element.
- add show & hide support: i made the div initially visibility:hidden and added a call at end of creation: setTimeout with 100ms setting visibility to visible. This gives a neat effect and doesn’t show the user the initial grid layout.
- add support for starting with the center image (I realized it on php side)
Feel free to contact me via mail or blog, I can give you my code samples
Fabian
March 28th, 2008 at 2:26 pm (#)
Yeah I know I am spamming, but somebody asked about keyboard navigation.
here it is (inspired by lightboxv2)
Event.observe(document,’keydown’, this.handleKeyboard.bind(this));
handleKeyboard: function(event) {
var keyCode = event.keyCode;
if (keyCode == 37){ // display previous image
if (this.currIndex != 0){
this.currIndex = this.currIndex - 1
this.goTo(this.currIndex);
//this.slider.setValue(this.currIndex);
}
Event.stop(event);
} else if (keyCode == 39){ // display next image
if (this.currIndex != (this.stackCount - 1)){
this.currIndex = this.currIndex + 1
this.goTo(this.currIndex);
//this.slider.setValue(this.currIndex );
}
Event.stop(event);
}
},
PS: I noticed that you have multiple this.slider.setValue() calls that do not check if slider is used.
March 29th, 2008 at 3:12 pm (#)
Thanks Fabian!
I will add your changes to the script. I am also looking into how can it handle different size images properly. I am not sure if I will have time over this weekend but lets see.
I will also post the code on Google Code with public SVN so that you guys can contribute directly.
Thanks
March 31st, 2008 at 4:36 am (#)
Hello and thanks for your work. This is my little contribution :
In the method initialize :
if(this.options.enableKeyboard) {
document.observe(’keyup’, (function(e) {
var code = e.keyCode;
if(37 == code) this.previous();
if(39 == code) this.next();
}).bind(this));
}
if(this.options.enableMouse) {
var eventType = Prototype.Browser.Gecko ? “DOMMouseScroll” : “mousewheel”;
Event.observe(this.elem, eventType, (function(e) {
this.enableMouse(e);
}).bind(this), false);
if (this.useCaptions) {
Event.observe(this.captionHolder, eventType, (function(e) {
this.enableMouse(e);
}).bind(this), false);
}
}
Additional methods in the class :
decreaseIndex: function(e) {
if(this.currIndex > 0)
this.currIndex–;
},
increaseIndex: function(e) {
if (this.currIndex < this.getStackCount() - 1)
this.currIndex++;
},
previous: function(e) {
this.decreaseIndex();
this.toCurrentIndex();
},
next: function(e) {
this.increaseIndex();
this.toCurrentIndex();
},
enableMouse: function(e) {
Event.wheel(e) < 0 ? this.next() : this.previous();
},
toCurrentIndex: function(e) {
this.goTo(this.currIndex);
this.updateSlider(this.currIndex);
}
I also suggest to change the disable links method. I think that changing the href attribute is not a good idea because it can be use by another script (ex : lightbox).
In the following method I just suppress the default link behaviour :
disableLinks: function(){
this.elem.select(”a”).each(function(a){
a.observe(’click’, function(e) {
e.preventDefault();
});
});
}
And finally the wheel method from Frank Monnerjahn :
Object.extend(Event, {
wheel: function(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
return Math.round(delta); //Safari Round
}
});
Hope this helps.
March 31st, 2008 at 7:10 am (#)
Great update - really appreciate the effort you’re putting into this. Thanks for the comments inline as well - hopefully the community can have a hand in moving this forward. Kudos again.
March 31st, 2008 at 7:33 am (#)
Martin: Your changes are now integrated and are live.
Fabian: Can you submit your code as well? So that I can integrate it? I am working on the image resize issue where non-square images can be rendered properly.
Thanks guys!
April 3rd, 2008 at 6:04 pm (#)
I have posted this related message on the Grails mailing list.
http://www.nabble.com/Richui-flow-widget-issues-td16477103.html
From these comments it looks like I should use square images to solve one of my issues (i.e. the issue of not being centered) bt I’m still at a loss for the link not working
April 3rd, 2008 at 6:12 pm (#)
Shame, square images are still not centered. So close!
April 4th, 2008 at 6:21 am (#)
Keith: That is a known issue. Unfortunately, due to some other projects, I haven’t had time to investigate it as much as I would like. But I am positive that soon there will be fix posted.
If you find someting please feel free to share
April 4th, 2008 at 2:19 pm (#)
Thanks for the reply and thanks for such a great effect.
Unfortunately I’m completely at a loss when it comes to Javascript. This is why the Grails solution appealed to me.
April 4th, 2008 at 3:08 pm (#)
I know it is a complete hack but by editing the numbers in the two lines of protoflow.js with the ‘HACK’ comment below I was able to get my flow centered.
/**
* function: moveTo
* Actually moves the images based on the position provided by function
*
* parameters:
* currentPos - {int} Position to move to
*/
moveTo: function(currentPos){
var x = currentPos;
this.currPos = currentPos;
var width = Element.getWidth(this.elem) * 90 / 100; /* HACK */
var height = Element.getHeight(this.elem);
var top = this.elem.offsetTop;
var size = width * 0.49;
var biggest = height;
var zIndex = this.stackCount;
this.stack.each(function(elem, index){
Element.absolutize(elem);
elem.setAttribute(”index”, index);
if (this.options.useReflection) {
elem.down(1).setAttribute(’index’, index);
}
var z = Math.sqrt(10000 + x * x * 1) + 100;
var xs = x / z * size + size;
elem.setStyle({
left: ((xs - 40 / z * biggest) - 22) + “px”, /* HACK */
top: (30 / z * size + 0) + “px”,
width: (100 / z * biggest) + “px”,
height: (110.25 / z * biggest) + “px”,
textAlign: “center”
});
//console.log(elem);
elem.style.zIndex = zIndex;
if (x < 0)
zIndex++;
else
zIndex–;
x += this.options.flex;
}.bind(this));
},
April 16th, 2008 at 11:32 am (#)
Hi there. I’ve just downloaded the latest version of ProtoFlow and have it all set up on http://test.vauxhalldiagnostics.co.uk, however, i’m having issues with my links. They dont seem to work. I’m on a mac and have tried viewing with various browsers - firefox, opera, safari.
I’m a noobie to js so any help you can give me woulod be great.
thanks
April 29th, 2008 at 2:21 am (#)
Hey there,
I’d love to use this (hoverbox mod and all). But I also get the non-working links. The URL appears in the status bar, but clicking on the image doesn’t activate the link. Using Mac browsers as in the post above.
Has this been addressed?
Also, the zip download does not contain the resizer.js . Don’t know if it’s necessary for anything here, but I get the activity error of its absence.