ProtoFlow Updated - Better Captions & Image Reflection!
March 13th, 2008 | Published in Javascript, ProtoFlow, Prototype, Scriptaculous | 66 Comments
March 17, 2008: I have updated the script again. It now supports <a> tags. More information can be found here.
After reading through comments on the original launch post I finally got a chance to update the ProtoFlow script for with latest changes.
It now has a better caption system. It now supports image Reflection!
Credit goes out to those who participated in original blog post with all the helpful comments and suggestions. I am using Reflection.js found here. Many thanks to the author.
So fellow developers/users as done previously please provide your feedback and comments.
You can find a better documentation here and code is located at the bottom of the page here
March 13th, 2008 at 12:57 pm (#)
[…] ProtoFlow has been updated! […]
March 13th, 2008 at 1:24 pm (#)
Looks great, any chance of getting the left & right keys to move thought the items
March 13th, 2008 at 2:03 pm (#)
Tom: That is next in the list now. :o)
March 13th, 2008 at 2:37 pm (#)
HI,
Cool. Adding reflection.js is just a very good thing.
Some other sugestion :
#1 :in initialize, you could replace
this.elem = elem;
by
this.elem = $(”elem”)
And now you can pass either just an id or the full element when you instantiate new protoflow object.
#2 : prevent user passing a non-existant element
Just add this line on top of initilize function
if (!$(elem)) return;
[…]
rest of code here
[…]
Hope this help and good luck for the next iteration.
March 13th, 2008 at 3:00 pm (#)
^ this looks good. I will add it to the script tonight.
Thanks.
March 17th, 2008 at 3:57 am (#)
This is great!
How would I add links to the images? The reflection disappears when using <a href=.. on the images in the flow.
March 17th, 2008 at 5:05 am (#)
Janne: that is a known issue. I am working on a fix.
March 17th, 2008 at 6:12 am (#)
alright! cheers.
March 17th, 2008 at 10:39 am (#)
I must add that I was planning to combine lightbox (slightly altered) with protoFlow, but it seems to only respond to link tags! That’s why!
When will the new release be out?
March 17th, 2008 at 10:48 am (#)
Janne: I will probably update ProtoFlow in 2-3 days.
March 17th, 2008 at 11:17 am (#)
My only issue is the use of reflections.js - it’s broken in Firefox 2.0.10.
Granted FF users are usually on top of being updated with their browser, but it’s just BARELY enough of a crux for me
I gotta say - it looks awesome, thanks for putting faces on it! It’s smooth!
March 17th, 2008 at 11:29 am (#)
First: thumbs up. keep up the good work!
I’m wondering why the images on the right side are out of the div, whilst the left side fits perfectly.
A measurement problem?
March 17th, 2008 at 11:35 am (#)
Agreed. They seem to take more room on the right then on the left. even though they do not drop out here. But the outer limits are not balanced, left/right.
Anyway, i think you do a great job. And you should add a paypal donation button for the rewards!
I’ll wait till the next update!
March 17th, 2008 at 12:22 pm (#)
Support for tag has been added. Remember it could be flaky.. i did this during my coffee break so it does need some testing
March 17th, 2008 at 12:40 pm (#)
Does seem to fall apart now!
Thanks anyway.
I only updated both protoflow js and css files.
Anything I forgot?
March 17th, 2008 at 12:44 pm (#)
Sorry, it works now. But they aren’t clickable for the flow effect anymore. Probably interfered by the link tag?
March 17th, 2008 at 12:48 pm (#)
there is a optional parameter that you have to use to configure the “scroll on click” feature.. set enableOnClickScroll: true when u initialize ProtoFlow
I am not too comfortable with this approach so i am open with different implementation ideas.
March 17th, 2008 at 1:03 pm (#)
Now it works! Excellent, Obaid!
March 17th, 2008 at 1:50 pm (#)
Falls apart in Firefox and IE on my PC.
And Firefox on the Mac..
Even though on Firefox (mac&pc) it comes together after pulling the slider.
Any ideas?
March 17th, 2008 at 2:53 pm (#)
Janne, is there a sample page online that I can see the code for it?
I tested this on Safari (win & Mac), Firefox (win & mac) and it seems to be working on both.
March 17th, 2008 at 3:12 pm (#)
Here you go: http://rubenoreel.nl/protoflow/test.html
I hope you are right and I made a mistake!
March 17th, 2008 at 3:20 pm (#)
It does work on Safari on Vista here as well. In Firefox the flow does not work by clicking on the images.
March 17th, 2008 at 3:37 pm (#)
Hmm.. i will test it out on XP tonight but on my OSX Firefox this is working great ..
btw really good use of the script!
March 17th, 2008 at 3:56 pm (#)
Thanks!
Here’s what it looks like on Firefox (2.0) on my Mac (10.4.11): http://img183.imageshack.us/my.php?image=screenshot1av8.png
It’s past midnight here, so I guess I will see your answer in the morning.
March 17th, 2008 at 4:02 pm (#)
I will look into it asap. Don’t have Firefox 2.0 installed so if anyone else here can help out with testing that would be great.
March 17th, 2008 at 6:09 pm (#)
I love the idea but I am having a devil of a time. I feel lucky that I managed to get one picture with reflection and the scroll bar, but the rest in the div are just sitting there..I am sure that it is me I am trying to implement this on a oscCommerce site in php, and this is javascrip0t and I am inept at both. Example here ate http://www.fantasyfestival.com/catalog
March 17th, 2008 at 6:16 pm (#)
Chris:
When i look at your source code I see that you have
<div id=\"myCoverFlow\" style=\"overflow: hidden; position: relative;\">
<a href=\"http://www.fantasyfestival.com/catalog/necklace-pirate-flag-chest-p-28034.html\">
<img width=\"160\" height=\"160\" border=\"0\" title=\" NECKLACE PIRATE FLAG & CHEST \" alt=\"NECKLACE PIRATE FLAG & CHEST\" src=\"images//Media/642458241057.jpg\"/>
</a>
</div>
and then the rest of the images follow after tag which is why those images are not included in the effect. I wish i could debug it further but won’t have any time till a day or two but I will keep monitoring these comments and reply as fast as possible.
March 18th, 2008 at 4:31 am (#)
Obaid, any ideas about my IE and FF incompatibility?
You are sure the original (with link tags) SHOULD work on those browsers?
If so I need to fix my code somewhere.
March 18th, 2008 at 9:27 am (#)
I have it going in Firefox!! (Moved the div to outside of a loop, and fixed a css pointer) but no-go in IE.
March 18th, 2008 at 9:29 am (#)
Chris: search for console.log and remove all these lines. there is apparently a console.log line in the js. I will update the JS on the site tonight…
Sorry about this.
March 18th, 2008 at 9:31 am (#)
the Console.log fixed file is now located at: http://deensoft.com/lab/protoflow/protoFlow.js
March 18th, 2008 at 10:01 am (#)
Who needs flash?…
Weer een knap staaltje javascripting, met mijn favoriete libraries Prototype en Script.aculo.us: meet ProtoFlow.
Zoals de naam doet vermoeden naar voorbeeld van de welbekende coverflow van Apple. Lees meer op de weblog van Obaid Ahmed.
Wat mij betreft …
March 19th, 2008 at 6:42 am (#)
I love the look it has given my website http://www.fantasyfestival.com/catalog in Firefox, still cannot get my site, or your to work with IE but you’ll get to that I am sure. I’ll be honored to have my use of your great contribution placed in a showplace.
Thanks so much
March 19th, 2008 at 7:09 am (#)
Chris i just updated the script. The issue with IE should now be resolved. (you might need to clear your IE cache before testing the new script)
Cheers.
March 19th, 2008 at 7:25 am (#)
Sorry, but with IE7 i still have problems, proptoflow doesn’t work! Dragging is the problem…
March 19th, 2008 at 2:58 pm (#)
Nice, it appears ok in all browsers i tested now.
However, I can not click and browse the flow in both IE and FF.
Perhaps I should rid myself of the link tag at all?
March 19th, 2008 at 3:12 pm (#)
Obaid, could you please show us an outline of the hierarchy of the html elements generated by the javascript? The issue of the dragging seems to be caused by the images that are on top of the slidetrack. Giving the slidetrack a z-index of 1000 in protoflow.css works, but not in IE.
If I’d know what the html would look like once generated I could somehow adapt the css to it..
March 21st, 2008 at 4:44 pm (#)
Janne: If you use FireBug (www.getfirebug.com) you can easily check the outline of the hierarchy of the html elements after ProtoFlow.
It basically keeps the same layout except that it adds a < canvas > object that is needed for reflection.
I am investigating the issue and will update the script over the weekend.
March 24th, 2008 at 9:26 am (#)
Obaid, thanks I will try that.
Looking forward to the updates!
March 25th, 2008 at 5:10 am (#)
I love the control, pretty seamless to implement. However I’ve run into issues with IE as a whole and click-snapping in FF. Would love to see a baseline update or someone make the needed changes to get this working smoothly on all platforms, then branch it if you want to add bells and whistles. I’ve been able to do a lot piggy-backing on the onclick in prototype so as soon as this is stable and x-browser I plan to use it in a lot projects. Thanks for all the hard work!
March 25th, 2008 at 5:17 am (#)
Looks like the only issue I see in the latest is that click-to-jump always takes you back to the first element - once that’s cleaned-up this thing will be ready to roll.
March 25th, 2008 at 11:31 am (#)
Are there any updates already? Not sure if I should be looking on this page..
March 25th, 2008 at 12:42 pm (#)
Janne: a bug fix will be posted by tonight. Sorry I got caught up with some other project but the IE bug is related to the Z-INDEX
March 25th, 2008 at 1:52 pm (#)
Ah cheers, Obaid!
Also discovered that if I set reflection to false, the flow doesn’t work at all.
And somehow the reflections are transparent (logic i think), but they show through the reflections of the images underneath, which looks a bit messy. Maybe I should set a background for the images somehow?
I am just thinking out loud here, I should use Firebug to see what’s possible, I guess..
March 25th, 2008 at 2:00 pm (#)
Solved the reflection “see-through” by adding
canvas {
background-color: #FFF;
}
to my css.
March 25th, 2008 at 3:39 pm (#)
Also, the flow is not centered (elements are cut off on the right side), i fixed it by changing
var size = width * 0.5;
to
var size = width * 0.42;
on line 270 in protoflow.js
March 27th, 2008 at 2:56 pm (#)
Maybe I’m missing something but the download has a protoFlow.js dated March 17th?
March 28th, 2008 at 5:21 am (#)
Chris - Sorry that was my mistake. The correct version should be up now.
March 28th, 2008 at 8:16 am (#)
I just downloaded and implemeted on my photo gallery main page, but I have some issues.
1. Do the images “have to be” square? You’ll see on my page that I have different sized thumbnails and it doesn’t look quite right on the skinnier images.
2. When I click on an image to scroll, there is an outline around the image that is bigger than my image is. This is probably due to #1 above, but not sure. This causes an issue on skinnier images, when you click the image on the right of the current centered image, it is still clicking the center image, so it doesn’t go to the next image.
3. Can captions have a link on them? If so, how? I notice if I have enableOnClickScroll: false; that the image then links to where it should go, but I’d like to have the scrolling work, and the caption be the link.
Thanks for a great script!!
March 28th, 2008 at 8:20 am (#)
Oops, forgot to give the link:
http://www.zluth.org/photo_gallery/index_flow.php?level=collection&id=2#
March 28th, 2008 at 8:42 am (#)
I also noticed that if I click an image on the left side to bring it to the front, it stays behind the image on the right instead of in front of it.
April 18th, 2008 at 2:55 am (#)
Great script and will be using it soon.
I have 2 questions -
1. I have been trying to move the positioning of the images so that the distant right ones are appearing whole and not chopped off by a div or whatever - it doesn’t seem to be positioned by css. Any ideas?
2. When adding longer captions would it be possible to fade the captions out away from the centre image as the text stacks up looking really complicated and untidy?
May 3rd, 2008 at 7:59 pm (#)
[…] 13. ProtoFlow […]
May 27th, 2008 at 1:46 am (#)
[…] ProtoFlow […]
June 17th, 2008 at 1:52 pm (#)
the change to the Z-Index property of the slider ruins the image in firefox when using lightbox to view the images:
zIndex: 99999999
I changed this to :
zIndex: 9990
then changed the lightbox zIndex values to be on top of that.
June 17th, 2008 at 3:34 pm (#)
Jim, thanks for the tip. I saw the script running on your site it certainly looks good!
July 4th, 2008 at 5:33 am (#)
Just a quick question,
how can I make the caption text smaller? Way to big for what I need…
Thanks
August 25th, 2008 at 10:38 pm (#)
[…] 13. ProtoFlow […]
August 29th, 2008 at 12:09 am (#)
[…] 13. ProtoFlow […]
September 14th, 2008 at 6:37 am (#)
[…] 13. ProtoFlow […]
October 6th, 2008 at 12:46 am (#)
Is there any way that this can be modified to work with divs instead of images? I know it sounds like a bit of an odd idea, but i think that this may be a viable alternative to making a website in flash that has the same effect.
To have the navigation seperate, so you dont click on the divs themselves but on a link, and then that link brings the relevant div to the front is what I was thinking.
For search engine indexing, images of each “page” would not really be a workable solution.
any ideas?
October 6th, 2008 at 7:06 am (#)
Hi Steve,
The script can be modified to work with any HTML element. In fact, it was like that in the early version of the script before we decided to restrict the functionality to images only since that’s what made sense.
With a small effort the script can be modified to handle any HTML element. Maybe a UL with bunch of LI’s that are managed?
May 5th, 2009 at 2:53 pm (#)
Hi there! I noticed that the reflection gradient (or shadow?) in Protoflow navigation is no longer working in Safari 4? I have been looking at the code but couldn’t yet find out where this is defined and where i’d need to change this. If you have any advice or ideas, i would appreciate it.
Cheers!
September 2nd, 2009 at 3:52 am (#)
Hey,
I’m currently building our website making prominent use of your ProtoFlow code. I’m setting it to autoPlay and noticed that the first element was never retrieved after the first run through. I checked out the code and noticed around line 222 the script sends us bak to element 1 and immediately increments the counter.
In order to fix this, I ammended the code slightly. This:
/**
* Function: autoPlay
*
* Internal function that is used to scroll through the list automatically
*/
autoPlay: function(){
if ((this.currIndex + 2) > this.stackCount) {
this.currIndex = 0;
}
this.currIndex = this.currIndex + 1
this.goTo(this.currIndex);
},
Became this:
/**
* Function: autoPlay
*
* Internal function that is used to scroll through the list automatically
*/
autoPlay: function(){
/*
* Was off by one, ammended.
*/
if ((this.currIndex + 2) > this.stackCount) {
this.currIndex = -1;
}
if(this.currIndex < this.stackCount - 1) {
this.currIndex = this.currIndex + 1;
this.goTo(this.currIndex);
} else {
this.goTo(0);
}
},
It’s working for me now, but I think there’s a couple of unnecessary lines (due to tinkering) in my example. Still, I’m happy it works.
Thanks for the great work guys, I’m really impressed with what you’ve done and how simply you’ve done it. Good job.
Rich
October 2nd, 2009 at 7:27 pm (#)
[…] 13. ProtoFlow […]
December 21st, 2009 at 9:24 am (#)
[…] ProtoFlow - ProtoFlow mimics the cover flow effect that you would find in iTunes, the iPhone, and other Apple products. In addition to the ProtoFlow JS and CSS file, it also uses three additional external JavaScript files – Prototype and script.aculo.us and Reflection.js – so make sure you’re willing to pay the price in page weight, additional HTTP requests, and potential decrease in page load times due to the above reasons. ProtoFlow demo […]