Home : Forums : Authoring and Programming : Cover Flow Remade with CSS and jQuery

Cover Flow Remade with CSS and jQuery

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
06-May-11 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 292
From: Brighton, UK
This is a forum topic for discussing the article "Cover Flow Remade with CSS and jQuery":

http://www.elated.com/articles/cover-flow-remade-with-css-and-jquery/

Learn how to create an authentic 3D Cover Flow effect in a web browser using CSS and jQuery.
06-Aug-11 03:25
DeleteDelete EditEdit
spx2 spx2's avatar Rank: none
No stars yet
Posts: 2
From: Italy
Here's a demo I set up that showcase how to obtain a Coverflow effect by relying only upon CSS properties. http://bit.ly/css_coverflow.

Thanks to your article now I know how to add reflection below each card Good work!
09-Aug-11 04:45
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@spx2: Cool! Don't forget you can wrap each image in a black-background (or white-background) div if you want to stop the background cards leaking through to the foreground cards.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
15-Aug-11 05:31
DeleteDelete EditEdit
spx2 spx2's avatar Rank: none
No stars yet
Posts: 2
From: Italy
thanks @matt ! I've tried to do that but somehow it fails and removes the opacity of the image. Sure I'm missing something thanks for the tip!
21-Dec-11 06:33
DeleteDelete EditEdit
Sylphide Sylphide's avatar Rank: none
No stars yet
Posts: 1
From: Switzerland
Wonderful script! Just had to add a little fix for img height in iPhone (cache problem) :

after :


var div = $(this);


add :


//cache fix
var img = div.find("img");
img.css( 'height', slideHeight );


And optionally replace "var windowHeight = $(window).height();" with "var windowHeight = $('#gallery').height();"
05-Jan-12 10:51
DeleteDelete EditEdit
hueston hueston's avatar Rank: none
No stars yet
Posts: 1
I'm getting the delay you mentioned on my iPhone 4 - does anyone know what's causing this? Would be perfect otherwise. Thanks!
11-Jan-12 17:03
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@hueston: I'm beginning suspect this is an inherent delay with CSS transitions on Mobile Safari. Another demo I did using jQuery Mobile transitions has a similar delay:

http://www.elated.com/articles/jquery-mobile-masterclass-simple-twitter-app/

I expect this will improve as iOS (and iOS devices) evolve and get faster. If I find any workaround in the meantime, I'll post here!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
21-Mar-12 23:18
DeleteDelete EditEdit
jecht jecht's avatar Rank: none
No stars yet
Posts: 1
From: Mxico
how can i add a action to the center image?
23-Mar-12 03:45
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@jecht: Modify the anonymous '#gallery div' click handler function defined inside init(). If the clicked div isn't the current slide, jump to that slide as normal. However, if it is the current slide, do whatever action you want to do.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
05-Dec-12 04:36
DeleteDelete EditEdit
andrealing andrealing's avatar Rank: none
No stars yet
Posts: 1
From: SIngapore
Hi,

Great script!

However, when I add many photos (I have hundreds), it works OK on the PC but dumps out both on the iPad and Android.

Any fix on this?

Thanks so much!

Warmest regards~
18-Dec-12 18:54
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@andrealing: Glad you like it! I expect you're running into memory issues on your mobile devices, since these browsers have a lot less RAM available. The only workaround I can think of would be to dynamically load the images on an as-needed basis, then remove the image objects from memory when they've gone out of view. But this would of course involve more network traffic and slower response times as the user scrolls back and forth through the gallery.

The easier solution would be to split your photos into multiple galleries

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated