So I’ve been working on this for a while, based on a few googles searches (see this post for details.
Thru other posts on this subject I’ve chronicled my work, and youtubed a few videos, I’ve now deployed it and re factored it to a jQuery plugin. And fixed a bug so it works in IE as well as other browsers, was throwing a odd childelement error in IE8 of all things.
So, my jQuery Coverflow is live at the LSRfm.com Podcasts Page, I’ll probably be fiddling with the code locally to tidy it and make it better, but it works quite happily as a jQuery plugin now.
Heres how to use it on your site, if you are so inclined, stay tuned for updates :-).
The Plugin requires jQuery UI for the Slider, and jCarousel for the Flowy-ness, it relies on the jQuery stock animation suite as well.
In the head
<script src="/path_to_js/jquery.coverflow.js" type="text/javascript"></script>
In the Body
<ul id="coverflow">
<li><a href="/some_link/"><img src="/someimage.png" alt="A Title" /></a></li>
</ul>
<script type="text/javascript">
jQuery.coverflow();
</script>
Like with any jQuery Plugin you can pass it some options/settings.
- total_items – total items in the carousel/flow, if 0 auto determines
- sider_start – the start point, leave null for middle, or number for that number or rnd for random
- targetflow – id of the ul with the items in
- sliderflow – id of the div to hold the slider
- titleflow – id to hold the title elements
- largesize – size as a int, so 200 for 200px, of the image currently in the middle of the flow
- smallsize – smaller size
- speed – speed in microseconds so 3s is 3000
- scroll – leave this as one
- visible – how many items to be in the viewing pane at once default 3
- animation – animation speed, if 0 takes it from speed
Essentially all the needs to be set is the names for targetflow, sliderflow, and titleflow, tho if you use the default names (coverflow, slider, coverflow_title) you don’t even need that.
Things I need to add to the plugin.
Auto generate the slider div if not present and add the relevant css to it.
Do a check to see if the item about to be highlight contains an image or not, and animate accordingly.
In theory this can support any type of content but an item of:
<li><a><img /></a></li>
works best.
You can grab a tar of the file at Coverflow_001 (2901 downloads )
Questsions? Feedback? Suggestions?
Comments below 🙂
Update:
Currently there is a small bug where in some browsers (so far Chrome and Safari), post load and setup, its not sliding to the desired element, the slider is moved, but the carousel does not.