That’s Pretty cool! I may consider using it on my company website, is there any restriction for commercial usage? nice job….

Please, feel free to use it! :) I only ask that if you manage to get some additional fixes done on the IE CSS you might consider sharing them here for other developers to take a look at. Thanks for the comment!

Hi there, I would be happy to get some fixes done on IE indeed, but it seems like the download source code button is broken. I’ll try to steal it from the demo page. Cheers…

The only thing im not getting is the basis for your position calculations. When not using reflections, all the top/left positions are set to the tag itself. And that results in erroneus scaling of the image.
I tried to dive in to your code and figure out by what are those calculations made but they seem to be random, trial and error like for your specific images :)

Hi there. My apologies if the server was having issues earlier. Here’s a direct link to the source code: Download

I’d love to see this working in IE and from the looks of it, Reflex would be a good way to go. Great work, would kill to see it working in IE.

To make it working under IE (at least 7), just change the following lines (L7-10):
var top = offsets[1];
var left = offsets[0];
var width = element.clientWidth;
var height = element.clientHeight;

with that :
var top = offsets[1] ? offsets[1]: 0;
var left = offsets[0] ? offsets[0]: 0;
var width = $(element).innerWidth();
var height = $(element).innerHeight();

To make the slider compliant with JQueryUI 1.7.1, changes lines 78-80 with the following :
min: 0,
max: this.getStackCount() – 1,
value: this.getCurrentPos(),

Rgds,

\-\.

To make it working under IE (at least 7), just change the following lines (L7-10):
var top = offsets[1];
var left = offsets[0];
var width = element.clientWidth;
var height = element.clientHeight;

with that :
var top = offsets[1] ? offsets[1]: 0;
var left = offsets[0] ? offsets[0]: 0;
var width = $(element).innerWidth();
var height = $(element).innerHeight();

To make the slider compliant with JQueryUI 1.7.1, changes lines 78-80 with the following :
min: 0,
max: this.getStackCount() – 1,
value: this.getCurrentPos(),

Rgds,

“-”.

i make those changes in the jquery-cflow.js file and yet having problems with IE 7 (reflection works fine) but coverflow is not moving :S

Hi Adnan,
I have compared the functionality of this and the newer release and I think you should rather concentrate on making it work on all browsers for a while. Even Opera10beta doesn’t support it.
A small suggestion without looking into code:
to fix the transparency issue could you place a black object with 100 opacity below the cover reflection?

Also the scroll bar is not positioned right.. Well.. it’s too far to the right :)
Hope it gives you some ideas

Hi Rav3n
Thanks for the suggestions! At the moment the reason I’ve opted to go for experimental releases for single browsers (rather than a cross-browser solution) is because I’m researching the best way to first replicate all the functionality found in the CoverFlow component you can see in iTunes. This particular release was missing angles, perspectives and a proper “stack” appearance which is why I chose to create a better version using the Canvas component (see the most recent posts for this). Although it currently only works in Firefox I hope to expand on this so that the control works using SVG for IE and in other browsers (such as Opera, Safari etc.) too.

The problem with the JS code not working in IE comes from the wrong .offset() call that you make. Wrong for IE. Instead of using

var top = offsets[1];
var left = offsets[0];

change that to

var top_ = offsets[1] || offsets.top;
var left_ = offsets[0] || offsets.left;

As well as the the width and height variable statements. There are some other problems with object property declarations. I will upload the modified file later on so that you guys can use it.

Nice work!
The IE changes proposed by \-\ works fine for me. Thanks!

hi there.

first of all… thx for the great plugin.

but i have a little problem. if i click on the knob of the silder there will be tree blue pixel on the left side near the caption text. why?

I made the changes to cflow.js from the suggestion made by (“-”) and the coverflow works. The slider bar doesn’t. Anyone got this to work?

Also i noticed the mouse doesn’t work?