ProtoFlow Updated - Better Captions & Image Reflection!

March 13th, 2008  |  Published in Javascript, ProtoFlow, Prototype, Scriptaculous  |  74 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

Responses

  1. ProtoFlow first preview release… :: Deensoft says:

    March 13th, 2008 at 12:57 pm (#)

    […] ProtoFlow has been updated! […]

  2. Tom says:

    March 13th, 2008 at 1:24 pm (#)

    Looks great, any chance of getting the left & right keys to move thought the items :)

  3. Obaid says:

    March 13th, 2008 at 2:03 pm (#)

    Tom: That is next in the list now. :o)

  4. Dj T@l says:

    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.

  5. Obaid says:

    March 13th, 2008 at 3:00 pm (#)

    ^ this looks good. I will add it to the script tonight.

    Thanks.

  6. Janne says:

    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.

  7. Obaid says:

    March 17th, 2008 at 5:05 am (#)

    Janne: that is a known issue. I am working on a fix. :)

  8. Janne says:

    March 17th, 2008 at 6:12 am (#)

    alright! cheers. :)

  9. Janne says:

    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?

  10. Obaid says:

    March 17th, 2008 at 10:48 am (#)

    Janne: I will probably update ProtoFlow in 2-3 days.

  11. BAX says:

    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!

  12. Daniel says:

    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?

  13. Janne says:

    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! :)

  14. Obaid says:

    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 :)

  15. Janne says:

    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?

  16. Janne says:

    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?

  17. Obaid says:

    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. :)

  18. Janne says:

    March 17th, 2008 at 1:03 pm (#)

    Now it works! Excellent, Obaid!

  19. Janne says:

    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?

  20. Obaid says:

    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.

  21. Janne says:

    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! :)

  22. Janne says:

    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.

  23. Obaid says:

    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! :)

  24. Janne says:

    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. :)

  25. Obaid says:

    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.

    :)

  26. Christopher says:

    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

  27. Obaid says:

    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.

  28. Janne says:

    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.

  29. Christopher says:

    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.

  30. Obaid says:

    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.

  31. Obaid says:

    March 18th, 2008 at 9:31 am (#)

    the Console.log fixed file is now located at: http://deensoft.com/lab/protoflow/protoFlow.js

  32. Daniel Schoone says:

    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 …

  33. Christopher says:

    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

  34. Obaid says:

    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.

  35. Salvatore says:

    March 19th, 2008 at 7:25 am (#)

    Sorry, but with IE7 i still have problems, proptoflow doesn’t work! Dragging is the problem…

  36. Janne says:

    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?

  37. Janne says:

    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..

  38. Obaid says:

    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.

  39. Janne says:

    March 24th, 2008 at 9:26 am (#)

    Obaid, thanks I will try that.
    Looking forward to the updates!

  40. jharr says:

    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!

  41. jharr says:

    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.

  42. Janne says:

    March 25th, 2008 at 11:31 am (#)

    Are there any updates already? Not sure if I should be looking on this page..

  43. Obaid says:

    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

  44. Janne says:

    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..

  45. Janne says:

    March 25th, 2008 at 2:00 pm (#)

    Solved the reflection “see-through” by adding
    canvas {
    background-color: #FFF;
    }
    to my css.

  46. Janne says:

    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

  47. Christopher says:

    March 27th, 2008 at 2:56 pm (#)

    Maybe I’m missing something but the download has a protoFlow.js dated March 17th?

  48. Obaid says:

    March 28th, 2008 at 5:21 am (#)

    Chris - Sorry that was my mistake. The correct version should be up now.

  49. Jason says:

    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!!

  50. Jason says:

    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#

  51. Jason says:

    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.

  52. chris says:

    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?

  53. 16 Free JavaScript Solutions for Displaying Your Images | Six Revisions says:

    May 3rd, 2008 at 7:59 pm (#)

    […] 13. ProtoFlow […]

  54. 15 Free Image Galleries Using JavaScript | Belive Blog says:

    May 27th, 2008 at 1:46 am (#)

    […] ProtoFlow […]

  55. Jim B says:

    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.

  56. Obaid says:

    June 17th, 2008 at 3:34 pm (#)

    Jim, thanks for the tip. I saw the script running on your site it certainly looks good!

    :)

  57. mat says:

    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

  58. Javascript Image Galleries Collection | Net Feast says:

    August 25th, 2008 at 10:38 pm (#)

    […] 13. ProtoFlow […]

  59. 16 Free JavaScript Solutions for Displaying Your Images « Jonsunhee’s Weblog says:

    August 29th, 2008 at 12:09 am (#)

    […] 13. ProtoFlow […]

  60. 16 Free JavaScript Solutions for Displaying Your Images : NguyenVanChieu says:

    September 14th, 2008 at 6:37 am (#)

    […] 13. ProtoFlow […]

  61. Steve says:

    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?

  62. Obaid says:

    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?

  63. Janne says:

    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!

  64. Rich Mehta says:

    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

  65. 16 Free JavaScript Solutions for Displaying Your Images | 9Tricks.Com - Tips - Tricks - Tutorials says:

    October 2nd, 2009 at 7:27 pm (#)

    […] 13. ProtoFlow […]

  66. Free Javascript Web Gallery Solutions | Design Dazzling says:

    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 […]

  67. Niva says:

    July 2nd, 2010 at 3:09 pm (#)

    Protoflow not work anymore? Added to site, but images show up one over the other. Slider doesn’t work. All js uploaded properly, implemented properly with newest updates. Reflection works fine. Just actually flow doesn’t work. I am frustrated. Hope to get some sort of solution. :/

    valhagueart.com - tried implemented on homepage. But didn’t work. Help?

  68. 16个免费图片相册javascript解决方案 | ipple┇峥-Blog says:

    October 18th, 2010 at 3:41 am (#)

    […] 13. ProtoFlow […]

  69. sanket says:

    January 9th, 2011 at 6:33 am (#)

    Reflection not working very well in Chrome but in FireFox its looks so awsum.. thanx for Protoflow :)

  70. 16 Free JavaScript Solutions for Displaying Your Images | Graphic Techniques says:

    May 17th, 2011 at 11:12 pm (#)

    […] 13. ProtoFlow […]

  71. sargento coupons says:

    December 6th, 2011 at 3:09 am (#)

    It’s truly some sort of nice in addition to helpful section of information. I’m glad that you simply propagated that helpful info with us. You need to stay you informed in this way. Thanks intended for giving.

  72. www.youtube.com/watch?v=g1ZlZ4Z68b0 says:

    May 11th, 2013 at 12:50 pm (#)

    I think these were about to expire however, which means you ought to do it today.

    Store physical credit cards virtually on your mobile device ‘ For starters, it simplifies shopping and checkout because of the tap and pay feature. Cream Cheese Wontons.

  73. sggirls says:

    February 2nd, 2014 at 11:54 am (#)

    We’ll finish off our roսnd up oof the top ten HTC Inspire apps
    with Tango. 9) Βack (heel)(thrust or snap)(foot bent upward).
    Either way, uոless you start training sߋmewhere, you cannot expedϲt
    tο meet your goals.

    Look at my page :: sggirls

  74. Healthcare Growth Partners says:

    March 16th, 2014 at 7:57 am (#)

    Weird Tales Magazine pays writers between $. There would also be ’significant difficulties’ in guaranteeing customers’ deposits
    in any Scottish banks which got into trouble, ministers claimed.
    A further aspect of the nhs 5 pillars bill! Ask former co-workers how they’d describe you.
    But as per our forecast which is for underlying growth this year is likely to go to the bottom of your page.

    After central banks dropped a coordinated liquidity bomb overnight on
    Wednesday, aim to rescue these firms nhs 5 pillars from the significant repercussions
    of the crisis.

    Stop by my page; Healthcare Growth Partners

Leave a Response