Coverflow with jQuery V1.5 (an Update)

A jQuery Coverflow Update

So been working on my coverflow from: This post.

Been trying to make it a better replication, tho have some problems with reflections, so decided to skip that for a bit and work on scrolling, with steps greater than one.
I’ve had some hiccups with the animation again, so will have to consider ripping that out and redoing it.

The animation being the size alterations to the podcast cover images.

So heres the YouTube Demo of the Coverflow with the Slider working, and the traditional links updating the slider value.

Also when I get this to a working level, gonna need to redo the Version Numbers 😛

When I get this working nicely, it will be rather useful, both for LSRfm.com and personal use, since it will rotate any content inside a li, tho if theres an img it will do the resizing.

Perhaps drawing inspiration from the game covers rotator on Game.co.uk as well, we shall see….

jQuery Coverflow

My jQuery Coverflow….

So I’ve been hunting round for a coverflow plugin for jQuery.

Google search turned up both Blarnee Demo (or Blarnee Blog Post) and Paul Bakaus, both of which are quite good but don’t advise much on the use or implementation of.

Both of which are demos, using parts of jQuery and the jQuery UI, or elements of Canvas (which has been throwing odd errors in my firebug)

The second still being sat in the labs part of the UI svn, and not been touched for 6 months.

So further hunting found me, content flow, which looks quite good, but I couldn’t get it to implement properly or do quite what I wanted too, without throwing lots of errors and not working.

So, I thought about it for a while and heres the first result.

Video done on Mac Quicktime Player, (screen recording), web deploying soon…

I’ve used the jCarousel Plugin, which I already use on LSRfm.com for the LSRfm.com Twitter Rotator.

And using its callback functions and elements of jQuery’s animate library. I’ve created this iTunes/Apple Coverflow effect, still some work to do, and make it nice and configurable, so others can easily implement it, perhaps even make it and extension to jCarousel…

So a future blog post will describe the Javascript I used, and how to implement it.

Javascript Image.onLoad Broken

A Javascript Problem, and a Solution

Heres my code:

        var target = '';
        var loadstr = '';
        var webcamimg = '';

        function runwebcam(ttarget) {
                target = ttarget;
                webcamimg = new Image();
                loadstr = "http://lsrfm.com/images/webcam/lsr_studio.jpg?" + Math.random();
                webcamimg.src = loadstr;
                webcamimg.onLoad = gowebcam();
        }

        function gowebcam() {
                //stuff
        }

Thru the use of FireBug I’ve discovered that the function onLoad declared by onLoad is executing regardless of whether the image has finished being downloaded, which was my understanding as per TechRepublics Article.

So after a bit of hunting around I found this from Talideon.com.

So my adjusted code now reads:

        function runwebcam(ttarget) {
                target = ttarget;
                webcamimg = new Image();
                loadstr = "http://lsrfm.com/images/webcam/lsr_studio.jpg?" + Math.random();
                webcamimg.src = loadstr;
                webcamimg.onLoad = gowebcam();
        }
        function gowebcam() {
                if (!webcamimg.complete) {
                        setTimeout("gowebcam()", 500);
                        return;
                }
                //stuff
        }

Update:

Video of before/showing the fucked-upness

And Not fucked

WORK!

Crikey, there is a lot of stuff coming up!

Back to working now, after taking the Long Weekend off.

So far I have achieved some minor work, plans now to work on H3Wheelmen Xbox Live integration stuff, which means 360gaming.net is going to get its long awaited over haul.

That pretty much means complete rewrite and transferring it to CarlyonCMS, but that means I have to tag and release version1, which means work on LSRfm.com – Leeds Student Radio which then needs porting to Shock Radio.

And LSRfm.com goes back on air, on Monday, and currently the broadcast desk is in bits, took it apart this morning for repairs and maintenance.

So a busy week is to be had….

I also need to get on with some phpBB mods, that I have had on the back burner for a while.

Perhaps I should consider rebuilding the home web server.

 

That reminds me I have lots of coursework to get on with too. I had better start that.

So I shall sign off for now to go and start my work or my coursework, such fun!

 

On a different note, I enjoyed last nights GeekUp we had Dirk Ginader up from Yahoo! London to talk about Accessable Javascript, it was very interesting! Then there was drinking and that was good to!

I recorded it so ill listen back to that later.