JS Cover Flow v1.1

A Cover Flow component made for the web. The component has two modes, HTML5 and flash, supporting the most popular browsers and devices today. On mobile devices like the iPad and iPhone the animations are hardware accelerated by using CSS3 transforms resulting in a very smooth user experience.

JavaScript API


Basic Setup

<!-- <head> -->
<link rel="stylesheet" href="coverflow.css"/>
<!-- <body> -->
<div id="player"></div>
<script src="coverflow.js"></script>
<script>
	coverflow('player').setup({
		flash: 'coverflow.swf',
		playlist: 'playlist.json',
		width: 460,
		height: 240
	});
</script>

Configuration

playlistThe URL of the JSON playlist or an inline JSON playlist
width (480)Width of the Cover Flow component
height (270)Height of the Cover Flow component
item (0)First item that is focused on setup
backgroundcolor (000000)Color of the background (RRGGBB)
backgroundopacity (1)Opacity of the background (min:0, max:1)
gradientcolor (undefined)If you set this the background will be a gradient, top color is gradientcolor and the bottom color is backgroundcolor. Note: this will not work well with the cover reflections (RRGGBB)
mode (html5)Force flash mode by setting this to flash
flash (coverflow.swf)File path of the fallback SWF
wmode (window)Flash object window mode (window | opaque | transparent)
coverwidth (150)Maximum width of the cover
coverheight (auto)Default this flashvar is set to auto which equals the display height, this is overridable by a numeric value which restricts the maximum height of the cover.
covergap (40)Horizontal width between covers
coverangle (70)Angle of not selected covers in degrees
coverdepth (170)Depth of not selected covers
coveroffset (130)Horizontal width between selected cover and not selected covers
opacitydecrease (0.1)Decrease of opacity of the covers going back. This is disabled in html5 mode for better performance (min:0, max:1)
fixedsize (false)Scale and crop the images to fixed sizes set by coverwidth and coverheight instead of resizing them proportionally (true | false)
reflectionopacity (0.3)Opacity of the cover reflection
reflectionratio (155)The color distribution ratios of the reflection; valid values are from 0 to 255
reflectionoffset (0)Vertical offset of reflection
showtext (true)Show title and description (true | false)
textstyleCSS style for title and description. Default: .coverflow-text{color:#f1f1f1;text-align:center;font-family:Arial Rounded MT Bold,Arial;} .coverflow-text h1{font-size:14px;font-weight:normal;line-height:21px;} .coverflow-text h1{font-size:11px;font-weight:normal;} .coverflow-text a{color:#0000EE;}
textoffset (75)Vertical offset of the text below the covers counted from bottom
rotatedelay (0)Delay in milliseconds when auto rotated, if 0 no rotation is started
x (0)Horizontal offset of the Cover Flow in the container
y (0)Vertical offset of the Cover Flow in the container
tweentime (0.8)Elapsed time of one tween animation
focallength (250)Focal length to 3D covers. Make smaller to get fisheye lens effect
mousewheel (true)Scroll through the covers with the mouse wheel. (true | false)

Methods (Javascript API)

left():voidNavigate one cover left
right():voidNavigate one cover right
prev():voidNavigate to the previous cover
next():voidNavigate to the next cover
to(index:int):voidNavigate to the cover defined by index
on(event:String, listener:Function):voidAdd an event listener (see events below)
remove():voidRemoves the coverflow component

Events

readyCalled when the component is ready to accept commands
clickCalled when the focused cover is clicked
focusCalled when a cover is focused