Introduction
This article aims to show a simple way to reproduce a iTunes-like Cover Flow for our custom DIV
in HTML with support of jQuery/jQueryUI libraries.
It is fully draggable with mouse and it has an auto-repositioning system to ensure that at least a Snapshot is in middle position.
A simple usage of component, shown in this article, is displayed in this screenshot:
Background
This component uses jQuery library to simplify JavaScript development. Simply use a popular "Javascript Inheritance Implementation":
jquery.class.js
This component allows creation of Object Oriented JavaScript classes useful to develop a redistributable component with own methods and attributes.
As classes are created, it is simple to create a CoverFlow
object only selecting a target div
with particular features.
Using the Code
The HTML target code of this jQuery component is very simple. We must have a DIV
, "coverFlow1
" in this example, containing many DIV
s of "snapshot" class.
<html xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="1">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.js"></script>
<script type="text/javascript" src="js/jquery.class.js"></script>
<script type="text/javascript" src="js/coverflow.class.js"></script>
<script type="text/javascript" src="js/snapshot.class.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="coverFlow1" class="coverFlow">
<div class="snapshot">1</div>
<div class="snapshot">2</div>
<div class="snapshot">3</div>
<div class="snapshot">4</div>
<div class="snapshot">5</div>
<div class="snapshot">6</div>
<div class="snapshot">7</div>
<div class="snapshot">8</div>
<div class="snapshot">9</div>
<div class="snapshot">10</div>
</div>
</body>
The only bond of CSS style of "snapshot" is "position:absolute
" of that DIV
s because JavaScript tries to reposition and resize those div
s, so we have to ensure max freedom for those elements.
The script files are necessary for this work. jQuery-1.7.1.js is a jQuery library with the help of extended library jquery-ui-1.7.2.custom.js useful for particular kind of animations.
jquery.class.js as seen before, is a library that allows us creating Object Oriented Classes and so coverflow.class.js and snapshot.class.js are our two classes.
script.js is our main script. It simply creates instances of CoverFlow
class:
$(document).ready(function(){
$('img').bind('dragstart', function(event) { event.preventDefault(); });
var coverFlowElement = $('#coverFlow1');
var coverFlow = new CoverFlow(coverFlowElement);
});
We can see how this script with one row of code "var coverFlow = new CoverFlow(coverFlowElement);
" auto-creates all necessary code for our CoverFlow
component.
For developers, see downloadable codes of our two classes. The code is self explained. It simply creates methods to resize and reposition Snapshots div
s in CoverFlow
container.
It binds mouse dragging on CoverFlow
, with auto center of nearest DIV
like commons CoverFlow
components in commerce.
Points of Interest
You can simply use this code for your work without JavaScript modifications. With simple CSS restyle and HTML elements in Snapshot DIV
s, you can obtain this:
If you want to simply modify some JavaScript code to change the appearance of this component, you can see the main CoverFlow
parameters, in coverflow.class.js:
this._snapshotClass = ".snapshot";
this._snapshotDistance = this._width / 7;
this._smoothness = 1;
this._timeAnimation = 300;
_snapshotClass
is the className
of contained DIV
s in CoverFlow
container. _snapshotDistance
is the initial distance between snapshots. _smoothness
is a coefficient indicating morphing of defilated DIV
s around main snapshot. _timeAnimation
is milliseconds of scrolling animation of coverFlow
.
Compatibility
This component was tested with following browsers:
- Chrome 16.0.912.63
- Firefox 8
- Internet Explorer 9