Click here to Skip to main content
Click here to Skip to main content

jQuery Cover Flow like iTunes

, 10 Dec 2011 Apache
Rate this:
Please Sign up or sign in to vote.
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":

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:

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:

 /* 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

Share

About the Author

b4rc0ll0
Engineer n
Italy Italy
No Biography provided
Follow on   Twitter

Comments and Discussions

 
Questionclicking PinmemberMember 1018064730-Jul-13 21:00 
AnswerRe: clicking Pingroupb4rc0ll023-Oct-13 15:47 
QuestionNot Working in iOS PhoneGap app [modified] PinmemberMember 457657515-Apr-13 0:41 
AnswerRe: Not Working in iOS PhoneGap app Pingroupb4rc0ll023-Oct-13 15:50 
QuestionAuto Scroll and Mouseover PinmemberMember 997776210-Apr-13 4:37 
QuestionNot working? PinmemberMember 945456924-Sep-12 6:36 
AnswerRe: Not working? Pingroupb4rc0ll04-Oct-12 0:00 
GeneralRe: Not working? PinmemberMember 94545694-Oct-12 2:23 
Questioncongratulations!! Pinmemberjosbram20-Jul-12 4:25 
GeneralNicely done! PinmemberMember 91926906-Jul-12 7:53 
GeneralMy vote of 1 PinmemberDebojyoti Saha15-Jun-12 9:22 
animation not work. Only Div 6 active.
GeneralRe: My vote of 1 Pingroupb4rc0ll016-Jun-12 14:56 
GeneralRe: My vote of 1 PinmemberMember 457657516-Apr-13 19:49 
GeneralMy vote of 5 PinmemberPhantomJ23-Dec-11 3:18 
GeneralMy vote of 5 Pinmembermaq_rohit11-Dec-11 18:29 
GeneralMy vote of 5 PinmemberPerlDev11-Dec-11 4:53 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 10 Dec 2011
Article Copyright 2011 by b4rc0ll0
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid