Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML5

jQuery Cover Flow like iTunes

Rate me:
Please Sign up or sign in to vote.
4.84/5 (15 votes)
10 Dec 2011Apache2 min read 86K   3.4K   37   17
Create a DIV based Cover Flow like Album Cover Flow in iTunes with mouse horizontal dragging

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:

screenshot1.JPG - Click to enlarge image

Background

This component uses jQuery library to simplify JavaScript development. Simply use a popular "Javascript Inheritance Implementation":

JavaScript
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
<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:

JavaScript
 $(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:

screenshot2.JPG - Click to enlarge image

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:

C#
 /* 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.

Compatibility

This component was tested with following browsers:

  1. Chrome 16.0.912.63
  2. Firefox 8
  3. Internet Explorer 9

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0


Written By
Engineer n
Italy Italy
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionLoading on a Page Pin
Member 1164977924-Sep-15 9:57
Member 1164977924-Sep-15 9:57 
Questionclicking Pin
Member 1018064730-Jul-13 20:00
Member 1018064730-Jul-13 20:00 
AnswerRe: clicking Pin
b4rc0ll023-Oct-13 14:47
b4rc0ll023-Oct-13 14:47 
QuestionNot Working in iOS PhoneGap app Pin
Member 457657514-Apr-13 23:41
Member 457657514-Apr-13 23:41 
AnswerRe: Not Working in iOS PhoneGap app Pin
b4rc0ll023-Oct-13 14:50
b4rc0ll023-Oct-13 14:50 
QuestionAuto Scroll and Mouseover Pin
Member 997776210-Apr-13 3:37
professionalMember 997776210-Apr-13 3:37 
QuestionNot working? Pin
Member 945456924-Sep-12 5:36
Member 945456924-Sep-12 5:36 
AnswerRe: Not working? Pin
b4rc0ll03-Oct-12 23:00
b4rc0ll03-Oct-12 23:00 
GeneralRe: Not working? Pin
Member 94545694-Oct-12 1:23
Member 94545694-Oct-12 1:23 
Questioncongratulations!! Pin
josbram20-Jul-12 3:25
josbram20-Jul-12 3:25 
GeneralNicely done! Pin
Member 91926906-Jul-12 6:53
Member 91926906-Jul-12 6:53 
GeneralMy vote of 1 Pin
Debojyoti Saha15-Jun-12 8:22
professionalDebojyoti Saha15-Jun-12 8:22 
animation not work. Only Div 6 active.
GeneralRe: My vote of 1 Pin
b4rc0ll016-Jun-12 13:56
b4rc0ll016-Jun-12 13:56 
GeneralRe: My vote of 1 Pin
Member 457657516-Apr-13 18:49
Member 457657516-Apr-13 18:49 
GeneralMy vote of 5 Pin
PhantomJ23-Dec-11 2:18
PhantomJ23-Dec-11 2:18 
GeneralMy vote of 5 Pin
maq_rohit11-Dec-11 17:29
professionalmaq_rohit11-Dec-11 17:29 
GeneralMy vote of 5 Pin
PerlDev11-Dec-11 3:53
PerlDev11-Dec-11 3:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.