jQuery Cover Flow like iTunes

Download source - 150.25 KB

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 DIVs 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 DIVs because JavaScript tries to reposition and resize those divs, 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(){
    
    //Unbind Image Dragging in html. Avoids drag problems on CoverFlow
    $('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 divs 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 DIVs, 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:

 /* Parameters */
this._snapshotClass = ".snapshot";
this._snapshotDistance = this._width / 7;
this._smoothness = 1;
this._timeAnimation = 300;

_snapshotClass is the className of contained DIVs in CoverFlow container. _snapshotDistance is the initial distance between snapshots. _smoothness is a coefficient indicating morphing of defilated DIVs around main snapshot. _timeAnimation is milliseconds of scrolling animation of coverFlow.