Cover flow in Javascript
My wife is a scrapbook consultant. She was looking for a way to showcase her artwork on her web page. Instead of your typical list of thumbnails, I thought it would be more interesting to put her scrapbook pages in iTunes cover flow. So after a weekend of messing with javascript, this is the result:
http://myscraproom.net/pageflow.html
It doesn't have the oblique angles, but I think I know how to achieve that effect. There is also a Safari compatibility issue, and a performance improvement I can make. More to come.
Update
Finn Rudolph has added many enhancements to the original script. I highly recommend using his Image Flow.
April 18th, 2007 at 2:57 pm
Totally Cool ! Thanks for Sharing. It gives me ideas for my photography.
April 27th, 2007 at 10:29 am
Its a great cover flow. Congratulations.
Are you thinking of explaining how to achive that result?
Have a nice day.
A
April 28th, 2007 at 9:50 am
All of the code is available directly in the page. (Yes, I know it should be broken out, but this was an experiment.) You can take this code and use it as your own.
There are three ideas in the code.
First, the use of setTimeout to perform animation. setTimeout schedules a function call to occur at some time in the future. If the animation is not yet finished, this function should again call setTimeout.
Second, the math behind the manipulation of the images. The path is a 100-unit hyperbola, where the observer is standing 100 diagonal units away from the origin. Divide the image height by the perpendicular distance from the observer to simulate vanishing. Change the zIndex to simulate occlusion.
Third, the use of hidden div tags to hold data. Set the inner text of a visible div tag to the inner text of a hidden one in order to place the data on the screen.
Enjoy!
June 13th, 2007 at 11:33 am
Great job !
I really would like to understand how it works. I've passed 2 days on it but I can't figure out.
Would it be possible for you (or someone that did understand how it works) to email me some detailed explanations ? Thanks in advance, and again, congrats for the work !
July 2nd, 2007 at 9:36 pm
Thanks for your work! It looks fantastic!
July 16th, 2007 at 10:56 pm
I've just had a quick look at it and was able to substitute on of my pics for cocoa1.jpg but couldn't get the reflection. Which bit of the code governs the reflections? 'Scuse my ignorance and thanks for any help.
I'd like to use it as a portfolio.
July 18th, 2007 at 11:33 am
The reflections are part of the raw images. I generated the images using the code at this location:
http://cow.neondragon.net/stuff/reflection/
I was unable to integrate the reflection code into the coverflow directly. If you are able to do so, please post a link.
July 25th, 2007 at 11:42 am
I too am trying to implement a Coverflow effect - for browsing podcast album art.
One of the pages I turned up looking for javascript offers the code for doing reflections: http://cow.neondragon.net/stuff/reflection/
Thanks for posting your work.
October 4th, 2007 at 12:21 pm
Hi Michael,
Thanks so much for sharing your work! I was able to use you code on the latest launch of http://www.buddystumbler.com. Your code was very easy to integrate and it works beautifully!
October 4th, 2007 at 1:13 pm
[...] scrapbook work, so he wrote some JavaScript code to mimic the Cover Flow effect and shared his results in one of his blog posts. Here is the URL to Perry’s [...]
October 9th, 2007 at 4:33 pm
I'm trying to use this code to present my artwork on my website but when I substitute your images with the web address for mine the size ratio is wrong and I can't seem to find where I can change that. Please help.
October 11th, 2007 at 12:19 am
Craigh,
The magic is in this line:
image.style.height = 110.25 / z * biggest;
The number 110.25 is the percentage of height to width of my images. Just divide height by width and multiply by 100 to get the exact ratio to plug in.
Enjoy!
October 12th, 2007 at 7:21 am
Hi Michael,
thanks for the nice Javascript Code. I made some "improvements" on it. Now it scales the Images in other formats than square and aligns at the bottom. At this time I'm working on (hopefully) massive performance improvements by implementing the scriptaculous framework (http://script.aculo.us/). See the following link for my version. You can drop a comment in the shoutbox.
http://194.95.111.244/~countzero/myCMS/index.php?c_id=1&s_id=4&tag=ImageFlow
Have a nice day.
Finn
October 13th, 2007 at 12:19 am
Hi Mike,
Is there a way to add code so that when a page is selected as desired and user cliks on it it follows that link?
I could do it modifing the code at the bottom, but not through direct click (or double click) in the image itself.
October 13th, 2007 at 4:11 pm
@Ray: Try adding the following code inside the tag:
ondblclick="document.location='http://www.adventuresinsoftware.com/blog/?p=104'"
That should redirect the user to this page by simply doubleclicking on the image... for single click action use onclick=""
Hope it works ;D
Finn
October 21st, 2007 at 2:39 pm
Nice looking effect! - sure this will become popular.
Can someone give tips* as to best way of inserting this display inside a fixed-width div? I tried modifying it but I keep getting small images! Unh!
(*read: 'instructions' !!)
October 22nd, 2007 at 3:16 am
Jepp, I had some ideas on this one. Check out Version 0.2 of my ImageFlow build on the code of Michael Perry. It now scales dynamically in relation to the div container called "images". I also added a changelog to the previous demo:
http://imageflow.finnrudolph.de
I would like to see what you build with it!
October 22nd, 2007 at 9:16 am
Finn - I think that's another great effect, and I see you've placed the images successfully inside a containing div.
However I do like the way the images on http://myscraproom.net/ change size as they skip to the front, as if they are "coming forward" in a "presentation" style.
That's the effect I'd like to reproduce, but inside a fixed-width div.
Basically I'm trying to put this effect in a page which has a wide but fixed-width central area (a centred layout).
I feel sure it must be possible!
October 22nd, 2007 at 12:58 pm
@nev: You don't get it. If something can be described in a dynamic div it always can be described in a STATIC div too.
Simply check my sourcecode and replace all dynamic style definitions like width:70% with a static width:750px. And you have the images in a static div. Now delete the div containing the changelog completely and the images and the effect should be in a aligned STATIC div container...
so long...
Finn
October 22nd, 2007 at 2:06 pm
Hey sorry - I was looking in Safari/Mac and forgot about the bug! The effect is lost in Safari and I thought that what I saw was what you intended! That's what got me confused. I see however it works very nicely in every other browser/os.
The http://myscraproom.net/ version however DOES work in Safari.
October 22nd, 2007 at 4:45 pm
@nev... hmmm... I develop on a Machine running Windows XP and tested the Stuff on Opera 9.x IE6 to IE7 and Firefox 1.5 to Firefox 2. But I saw the script on Safari running on a mac today... seems to screw up the image-height. Any Idea on a workaround? The http://myscraproom.net/ version does not read out the image height, but scales everything to a square format in relation to the total window-width... That's why it works on Safari.
So long...
Finn
October 22nd, 2007 at 5:00 pm
@nev: I tested ImageFlow 0.2 on Safari 3.0.3/Windows XP and found no problems: http://194.95.111.244/~countzero/tmp/ImageFlow_0.2_on_Safari_3.0.3.jpg
I don't have a Mac, but it seems to run on Safari for Windows ;D
October 23rd, 2007 at 12:49 pm
Seems like it's only Safari/Mac that throws it. As you say, the images stretch to the full height of the div.
October 24th, 2007 at 10:09 am
cool. is there a way to make this start on say the 3rd or 4th etc image?
October 24th, 2007 at 6:06 pm
@jenny: Sure, just add the following code to the body tag:
onload="refresh(); glideTo( -450, 'i4')"
That calls the refresh and the glideTo function. In this case ImageFlow glides to the 4th image. This code refers to my version of Michael Perrys scraproom: http://imageflow.finnrudolph.de
October 25th, 2007 at 4:18 pm
that works well. thanks
October 29th, 2007 at 9:02 pm
I love the script. How do i get it to fit inside of a table? right now it spans across the whole browser. Please advise.
October 31st, 2007 at 11:38 am
I'm trying to implement this function on my site, but was wondering how I go about changing the size of the function from the span of the entire page, to something in a more controlled environment- like something in pixels?
October 31st, 2007 at 4:07 pm
Has anyone tried viewing it on an iphone/ipod touch?
October 31st, 2007 at 11:01 pm
Bob and Michael,
Finn embedded the effect within a div tag. He achieved this by changing the windowWidth function to return only the width of the tag:
/* Get width of the images div container in px */ function windowWidth() { var width = document.getElementById("images").offsetWidth; return width; }Rico,
I just got my iPod Touch, and I love it. I've installed a Wordpress plugin to render the blog correctly on the screen. And, yes, the Javascript coverflow effect works on the small screen, albeit a little slowly.
November 1st, 2007 at 6:36 am
Michael L,
Thanks for this neat script. I haven't tried getting it to do real work yet, but have the start of an ipod touch/iphone launchpad for my iphone apps...
What I need for the script to do is... when the user clicks the image displayed in the center, to open a new page. I could bury the link in the caption tag, but thats not as sexy.
I don't believe that iphone safari supports ondblclick.... any hint?
here's the mockup...
http://www.myhip.com/flow.html
if you want to play some of my games...
http://www.myhip.com/iphone.html
November 1st, 2007 at 8:53 pm
Cool mockup! Yours is a bit smoother on the Touch, since it uses smaller images.
One thing that would work is to compare the captionId to the newCaptionId in glideTo. If they are the same, then the user has tapped the front-most image. This works better than double-clicking anyway, since the second click can be delayed.
You can probably make the target an attribute of the div tag so that you can retrieve it from the captionId. Then you can just navigate to it.
Good luck! Can't wait to see the finished product.
November 1st, 2007 at 10:15 pm
Michael,
Thanks for the tip... I added your suggestion of comparing the captionID... and it works
http://www.myhip.com/flow3.html
November 1st, 2007 at 10:57 pm
This is so cool! I have added dbl click goto url to images, and adjusted onload to go to whatever slide I want it to start on. I am working on the reflection part on the images and a now I am going to work on image and links from a database on Cold Fusion. Has anyone worked on a slider control?
Thanks for sharing !
November 4th, 2007 at 3:04 pm
Dynamically generated reflections anyone? Those are NOT Javascript, but server sided PHP generated reflections. I hacked Richard Daveys Easy Reflections v2 a bit and this is what it looks like:
http://imageflow.finnrudolph.de
I also improved some of the code . o O ( I think... ) ;D
November 5th, 2007 at 7:55 pm
*phew* I implemented a improved JavaScript Implementation of a Duff's Device Loop. That was kind of tricky... At this moment i couldn't think of anything else to improve. Now the main limiting factor should be the rendering engine of the browser. The speed scales in relation to the image quality of resized images: IE is fast, but the resized images look messy, Opera and Safari do a way better job, but are therefore somewhat slower... This version is testing only at the moment, you can check it out here: http://tinyurl.com/2ywabh
@ Michael L Perry: Could you take a short look on what i did to your code. Do you have any ideas how to improve a thing, or do you agree with me, that the browser engine is the limiting factor? Code: http://refactormycode.com/codes/108-test#refactor_749
November 6th, 2007 at 7:20 am
Finn,
I think that image resizing will always be the bottleneck. Have you measured the performance improvement that you achieved? Seems like it would get lost in all the high-cost image processing. But, yes, there is one minor improvement you can make to the Duff Device Loop. You can use a switch/case with fall-through to avoid the initial remainder loop.
I love the server-side reflections in PHP. You'd better believe I'm incorporating that. It was a pain manually applying the reflection to each image in Paint Shop Pro.
November 7th, 2007 at 11:53 am
Mouse wheel support and loading bar anyone? Okay this should be the last one... now I like it ;D
http://imageflow.finnrudolph.de/
@ Michael L Perry: Thanks, I measured the stuff I did and found it slower than the previous desing. Perhaps because there are function calls within the loop? Anyway, I tried another way and cached all I could. I also made only those variables global, that must be global. See the final code here: http://refactormycode.com/codes/108-test#refactor_787
November 10th, 2007 at 4:53 pm
I did some JavaScript performance benchmarking and Opera is by far the slowest browser! I started a thread including my benchmark results:
http://my.opera.com/community/forums/topic.dml?id=212488
In general Michael is right: The main performance drops are induced by the browsers high-cost image processing! This leads to only one feasible solution: Rewrite the code, that it can handle >100 images, but only displays a maximum of 10 at a time. Perhaps by hiding them width CSS when they are not focussed?!
November 15th, 2007 at 7:32 am
[...] Based on code by Michael L Perry [...]
November 15th, 2007 at 7:35 am
Hey, awesome code! We used it as a starting point for our CC-licensed project and added Photoshop-generated perspectives, dragging and mouse wheel navigation!
November 19th, 2007 at 7:07 pm
As I posted above: I rewrote the code to avoid performance drops by hiding all images (display:none) that are not in the viewing focus. Now it can handle large amounts of images (>100)... To keep the usability I also added a scrollbar. Which is a handy thing when there are hundreds of images to scroll ;D
http://imageflow.finnrudolph.de/
BTW: If anyone uses Opera - try switching the InterpolateImages feature OFF (opera:config#Multimedia|InterpolateImages) the quality of resized images drops, but there is a massive speed increase!
November 20th, 2007 at 10:16 pm
Please help! I have been trying to get this cover flow to fit into my table for the longest time. I am not very good at this stuff. I tried everything that was stated above but I can not figure it out. Can someone please look at my link and show me how to get this cover flow into the table?
http://www.qclocalhomes.com/help.html
Bob
November 20th, 2007 at 11:48 pm
Bob,
At this point, I'd recommend starting with Finn's ImageFlow code. In addition to the features he added, he has refactored the code in such a way that it is easier to place within a smaller space. He defines that container with another div tag, not a table cell. Maybe that is significant.
I spent a few minutes trying to reproduce the changes he made. He has changed the windowWidth function to get the width of the div tag itself, rather than the entire window. And he has changed the moveTo function to offset the image positions relative to the container. But there is something else that is eluding me. Again, perhaps it has to do with the table cell vs. the div tag.
So download ImageFlow. Finn has taken this farther than I could have, and he seems prepared to support it. When I redesign MyScrapRoom, I'm going to adopt his code.
November 22nd, 2007 at 12:58 pm
Excellent cover flow, one of the best I've seen ^^
I guess it would be easy to make a PHP script to give the images a perspective like cover flow and then request it with AJAX...
But I'm not sure, haven't really worked with image manipulation in PHP.
November 26th, 2007 at 11:13 pm
Hi, I was wondering about what the author says:
"There is also a Safari compatibility issue, and a performance improvement I can make."
Does it means, it'll not work or iPhone? bec as far as i know, iPhone uses safari web browser for internet applications...
I test http://imageflow.finnrudolph.de/ on safari browser with Max OS X, and it didn't work well... I am asking because i don't have an iPhone... any help or info please?
Thanks...
November 27th, 2007 at 12:46 am
Can this script work or interact with iPhone's photo album feature?
e.g. I have a web application, and i'd love to open it or browse it with the iPhone's Photo album feature (not by Safari browser). help?
November 27th, 2007 at 11:28 pm
Bob,
The Safari compatibility issue I originally talked about has been fixed. It was that Safari does not automatically scale images in both dimensions when you change just one dimension. I fixed this by changing both the width and the height proportionally. Finn improved on this by making that proportion variable, so that both portrait and landscape images are supported.
So it works on the iPhone and iPod touch. It's just slow because those devices can't scale images very quickly. And you can't drag the slider; you have to tap the images themselves.
Bryne,
Sorry, but this script does not work with the iPhone photo album. Sliding your finger across a web page always scrolls it. You have no opportunity to capture that event and do something else with it. So you can't flick the images the same way you can in photos.
You have to sync photos to the device before the photo app will work. It can't pull photos directly from the web. Perhaps there will be a third-party app that can do that, but none that I know of right now.
December 7th, 2007 at 1:24 pm
Hi,
there still is a Safari Problem: ImageFlow (and probably this Michaels version too) does not work with Safari versions below version 3.0! And I have really no Idea why. I enabled the javascript debug console ( http://developer.apple.com/internet/safari/faq.html#anchor14 ) but Safari 2.x did not spit out any error messages. It has some kind of problem to read out the correct .width and .height attributes of the image object. But no one I asked had any idea on a workaround. Do you?
@ Michael: Thanks for your positive feedback on ImageFlow ;D BTW: There is a brand new version of it!
http://imageflow.finnrudolph.de/
December 13th, 2007 at 2:58 pm
Cool! That is a weekend to be proud of. I am really impressed with the result...
December 17th, 2007 at 8:05 am
Here is the latest version from Finn I used for testing on my website (with very minor modifications of course.)
http://www.randytamayo.com/cf_index.html
Tested on Safari 3 (windows and mac), IE, Firefox and Camino.
December 28th, 2007 at 10:37 am
Hey Randy that's great! How do I use the code?
December 29th, 2007 at 5:51 pm
Hi,
ImageFlow is now fully compatible with ALL Safari Versions!
http://194.95.111.244/~countzero/myCMS/index.php?c_id=1&s_id=4&ShowEntry=1198959607
And I finished the english translation of the documentation: http://imageflowdocu.finnrudolph.de
@ Randy: Wow, this is what I developed ImageFlow for ;D I Suggest, that you update to the new version, to make it fully browser compatible...
January 2nd, 2008 at 5:53 am
Hi Finn,
Thanks, I will definitely do that!!!
Happy New Year to all!
Randy
January 20th, 2008 at 5:28 am
[...] Adventures in Software » Blog Archive » Cover flow in Javascript (tags: coverflow) [...]
February 20th, 2008 at 12:12 am
[...] by the way). But I’d like a solution that requires no plug-in. And having had success with cover flow, I thought I would give it a [...]
April 4th, 2008 at 12:05 pm
Fantastic script - thankyou for sharing it.
Is there any way to allow dragging of the actual images themselves, so the user can click and hold on an image that's off to the side, and drag it to the centre, or click and hold on the centre image and drag it to the side?
I find that users seem to expect this, and try doing that before finding the slider.
September 10th, 2008 at 5:11 am
That's great.
Thank you for sharing it!!!
October 8th, 2008 at 6:26 pm
great script.. i like itunes , so i like this script too... thanks..
October 10th, 2008 at 7:11 am
This is really very, very useful and cool script. Everyone to whom I showed it loves it...
I am trying to use it on my website, however, i would like to get the 4th image as default one in the middle with 3 on each side. I saw your previous reply to this suggesting adding an onload() event to the body where we refresh and use slideTo(). i faced two problems with this: 1. when i used it with the body tag, it just went on displaying the Loading Images part and never loaded. So, i used jQuery's document.ready function and put the refresh and slideTo calls inside jQuery. It seems to be working well in IE7 but does not work in Mozzila Firefox or Google's Chrome. I haven't checked it in IE 6. What happens in Firefox is that it stops in middle of the slide while loading and this leaves some space on the left hand side of the middle image making it look uneven. It looks fine in IE 7 though... any clues why this is happening?
Once again for sharing this great script.... !
October 10th, 2008 at 7:27 am
Also, Finn, I have tried adding the code to the window.onload function inside imageflow.js file. i am still facing the same issue with lot of space left on left hand side.... thanks for any help you can offer... !
October 10th, 2008 at 3:41 pm
Hey, Sateesh. This isn't Finn's blog, but I hope he's watching and will respond.
The easiest thing to do is just initialize current to 450 (3 * xstep). That should make the page initially display with the 4th image in the center. You won't need to add or modify any of the code.
Hope this helps.
October 11th, 2008 at 5:08 am
Oops! I think I goofed up....
Anyway, I'd like to thank you for sharing your wonderful script, Michael.... Are you saying that I directly set the current value to 450(3 * xstep) in the imageflow.js? I will try that...
October 12th, 2008 at 7:20 am
I just added this to my website with a few tweaks, its under Gallery. Is there a way to hide only the items for the category that is currently selected?
Thanks
October 12th, 2008 at 9:42 am
Do you mean you want to show only the current category items? If so, it's probably easier to just have separate pages for each category.
If you want to do something more complex than that, you will have to add some code to the main loop in moveTo. One good technique is to add a category attribute to each image, and test that attribute inside of moveTo to add some sort of effect. For example, you could set the opacity of the image to 50% if it is not in the current category.
Let us know what you end up doing.
October 20th, 2008 at 5:26 pm
Hi there,
I just wanted to drop a note, that ImageFlow is now finally object-oriented. That means many(!) ImageFlow instances on one website are possible. Check the demo http://imageflow.finnrudolph.de/ and the examples http://finnrudolph.de/ImageFlow/Examples
enjoy! ;D
April 6th, 2009 at 6:25 pm
Hey Michael,
Just wanted to point you toward this and say thanks.
http://www.pwhitrow.com/blog/entries/2009/04/06/xflow-a-javascript-and-php-based-coverflow-style-gallery/
April 15th, 2009 at 4:20 am
thanks
April 16th, 2009 at 8:01 am
Nice work! I’ll have to do a cross post on this one
April 30th, 2009 at 8:10 pm
Wonderfull…
May 25th, 2009 at 7:56 pm
Thanks great post
June 5th, 2009 at 7:02 am
I am basically a cinematographer. This post gave me more ideas.
June 11th, 2009 at 10:46 pm
How can i add this to a .aspx page in my webpage??? is ther a place where i can view all the source
October 2nd, 2009 at 11:25 am
Fantastic script, however.... I was wondering if it's at all possible to have links from each image to a different address?
This would be wonderfull, and I would be WILLING TO PAY!!!!
October 12th, 2009 at 5:54 pm
script don't work with cross domain images...i can't make reflection
December 16th, 2009 at 9:54 am
Hi,
Here is another CoverFlow effect. Easy to install and modify. And you can add a link to the image
http://www.flash-gallery.com/photoflow-flash-gallery/
December 29th, 2009 at 1:47 am
can i get access for this?
March 9th, 2010 at 3:59 am
hi, where can i find this?
March 9th, 2010 at 10:39 pm
http://imageflow.finnrudolph.de/
April 26th, 2010 at 1:35 am
Hello..please point out...where can i find this.....
July 19th, 2010 at 8:01 am
Hi Michael,
Really your coverflow effect is wonderful and it helps me a lot.. Thanks for it..
But i need to start from 3 image at first, i had seen your code as current=300(2*xstep), but it doesnt works..
Help me.. Thanks in advance.. Hope i will have response from you..
July 25th, 2010 at 9:48 pm
[...] Basierend auf Code von Michael L Perry [...]
July 29th, 2010 at 1:14 am
So beautiful sharing!Thank you very much.
Best wishes!Your article is very good!
,red bull caps
It is so nice.
Welcome to visit our website:
http://www.caps-hat.com