Apple Cover-flow effect using jQuery or other library?

C

14

58

Does anyone know how to achieve the cover-flow effect using JavaScript to scroll through a bunch of images. I'm not talking about the 3D rotating itunes cover-art, but the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion.

Clarethaclaretta answered 15/9, 2008 at 21:32 Comment(4)

Do you mean Coverflow (en.wikipedia.org/wiki/Cover_Flow) or Quick look (apple.com/macosx/features/quicklook.html)? – Skysweeper 15/9, 2008 at 22:46

The description is defiantly of Quick Look (not Cover Flow).. – Apostrophe 26/4, 2009 at 1:28

@rickyduck Yep. Might have something to do with bad spelling an a spell checker. – Apostrophe 28/11, 2012 at 14:23

Still, it turned out to have a great range of answers on Coverflow, even recent ones! 9/10, would search again. – Refraction 9/1, 2020 at 16:0

S

72

http://www.jacksasylum.eu/ContentFlow/

is the best I ever found. a true 'CoverFlow', highly configurable, cross-browser, very smooth action, has relections and supports scroll wheel + keyboard control. - has to be what your looking for!

Sprit answered 13/1, 2010 at 11:25 Comment(6)

Thank you zack, this is indeed the best of all coverflow libs I have seen in my evaluation! – Corrigible 10/8, 2010 at 7:25

This looks great, but I'm really turned off by the fact that it requires you to tinker with the DOM and as such can't possibly degrade gracefully. – Visage 11/5, 2011 at 9:22

Thanks a lot for this link. I found a few others, notably this one - addyosmani.com/blog/jqueryuicoverflow - but ContentFlow is absolute the best bang for this buck. – Admissible 9/8, 2011 at 13:37

Because this is manipulating height & width values & constantly listening to the mousemove event, this solution is very slow on mobile devices. A more performance optimized solution would be to use css3 transitions... It's built to do this natively. It wont work in ie6/7/8, but you could easily implement a graceful-degrade or polyfill to handle that. – Alveraalverez 1/2, 2012 at 16:40

Link is dead now in 2017 - can I find this elsewhere? – Allard 31/7, 2017 at 19:45

Oldest "full" link in the Wayback machine is from April, 2016, and the code is archived as "ContentFlow_1.0.2.zip" on GitHub. – Refraction 9/1, 2020 at 15:56

S

11

Not sure if you're talking about Coverflow (scroll through images) or Quicklook (preview files in lightbox), try editing your question.

Here's some JS Coverflow implementations:

Skysweeper answered 15/9, 2008 at 22:52 Comment(2)

A cross-browser implementation with mobile support, luwes.co/labs/js-cover-flow – Selfreliant 29/11, 2012 at 9:18

I can recommend @Selfreliant implementation. Good to use and can also be used "offline", if you need to present something in HTML without an internet connection (as it was in my case the case). – Quiescent 10/1, 2013 at 12:6

H

8

I think this is what you want http://addyosmani.com/blog/jqueryuicoverflow/

Hindmost answered 19/12, 2010 at 23:8 Comment(0)

C

4

I tried using the the Jack's Asylum cover flow but it wouldn't let me easily remove and re-add an entire coverflow. I eventually found http://finnrudolph.de/ImageFlow and not only is it more reliable, it's easier to hook into, uses less markup, and doesn't jitter when flipping through images. It's by far the best I've found, and I've tried several on this page.

Cabob answered 1/4, 2011 at 22:6 Comment(0)

E

3

There is an Apple style Gallery Slider over at http://www.jqueryfordesigners.com/slider-gallery/ which uses jQuery and the UI.

Eisk answered 14/11, 2008 at 18:25 Comment(0)

C

2

jCoverflip was just released and is very customizable.

Cruzcruzado answered 15/4, 2010 at 20:22 Comment(0)

L

2

colorbox has such amazing features..loving it. Also like this one http://www.webappers.com/2008/03/05/galleria-simple-but-nice-jquery-image-gallery/

Lute answered 27/1, 2011 at 17:10 Comment(0)

M

2

Is this what you are looking for?

"Create an Apple Itunes-like banner rotator/slideshow with jQuery" is an article explaining how you can make such effect using jQuery.

You can also view the live demo.

Maki answered 14/8, 2011 at 18:44 Comment(0)

V

1

Try Jquery Interface Elements here - http://interface.eyecon.ro/docs/carousel

Here's a sample. http://interface.eyecon.ro/demos/carousel.html

I looked around for a Jquery image carousel a few months ago and didn't find a good one so I gave up. This one was the best I could find.

Vergara answered 15/9, 2008 at 21:40 Comment(0)

L

1

Check out momoflow: http://flow.momolog.info True coverflow effect, and performant on Webkit (Safari and Chrome) and Opera, ok on Firefox.

Lavatory answered 19/1, 2010 at 19:31 Comment(0)

G

1

Just to let you all know, xFlow! has had some major work done on it and is vastly improved.

Go to http://xflow.pwhitrow.com for more info and the latest version.

Glyceryl answered 25/1, 2010 at 20:37 Comment(0)

U

1

i am currently working on this and planning on releasing it as a jQuery-ui plugin.

-> http://coulisse.luvdasun.com/

please let me know if you are interested and what you are hoping to see in such a plugin.

gr

Unchristian answered 27/11, 2010 at 21:20 Comment(0)

S

0

the effect that happens when you hit the space bar in a folder of documents, allowing you to preview them in a lightbox fashion

Looks like a classic lightbox plugin is needed. This is my favorite jQuery lightbox plugin: http://colorpowered.com/colorbox/. It's easy to customize, etc.

Sprit answered 19/1, 2010 at 21:21 Comment(0)

C

-1

This one looks really promising, and closer to the actual Apple coverflow effect than the other examples:

blarnee.com/projects/cflow

Callista answered 16/12, 2009 at 2:48 Comment(2)

...except that it crashes (at least on IE) – Lyall 16/12, 2009 at 2:55

...and on chrome it does nowt – Ephraim 7/1, 2010 at 22:0

Recommended topics

Hot tags