Skip to content
This repository has been archived by the owner on Jan 2, 2021. It is now read-only.

Commit

Permalink
updating overall structure of app.js, stripping out irrelevant code, …
Browse files Browse the repository at this point in the history 
…general improvements made. Some additional work remaining
  • Loading branch information
@addyosmani
addyosmani committed Aug 11, 2011
1 parent 9beb662 commit 68e19de
Show file tree
Hide file tree
Showing 5 changed files with 294 additions and 246 deletions.
6 changes: 4 additions & 2 deletions README
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
The jQueryUI Coverflow project seeks to create a fully functional 'CoverFlow' effect using a combination of jQuery, jQuery UI components and CSS3 transforms. The project builds on top of earlier work by jQuery team-member Paul Bakaus's coverflow component in an effort to push it towards being a closer representation of a coverflow.
The jQueryUI Coverflow project seeks to create a fully functional 'CoverFlow' effect using a combination of jQuery, jQuery UI components and CSS3 transforms.

Coverflow 2.1.2 includes support for Webkit CSS3 reflections courtesy of Nicolas Bonnicci as well as support for jQuery 1.6.2 and jQuery UI 1.8.9
Coverflow 2.2 (Preview) includes support for Webkit CSS3 reflections courtesy of Nicolas Bonnicci as well as support for jQuery 1.6.2 and jQuery UI 1.8.9. Cross-browser compatibility is also now in place.

General changes for this project:

Note: As of August, 2011 this project is being refactored. The underying coverflow component itself will largely remain unchanged, however I will be extending it to support more features and a tighter integration with features users are likely to user outside of the core coverflow itself.

Changes included in this release include improvements to the angular perspective often seen in coverflow implementations, changes to improve the 'stack' effect, updated to bring the overall coverflow viewport to focus on the 'current' cover (as per the iTunes implementation of the effect).

I also wanted to target releasing a CoverFlow project which would offer list support (eg. for playlists) and a good level of user interaction support. This release currently allows the use of keyboard navigation (both in the coverflow component, the slider and the list components) and also supports mousewheel navigation for the covers/sliders.
Expand Down
78 changes: 39 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI CoverFlow 2.1.2</title>
<title>jQuery UI CoverFlow 2.2</title>

<!-- Include theme -->

<link type="text/css" href="css/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />

<!-- Include jQuery and UI -->
Expand All @@ -26,6 +25,8 @@
<script src="js/app.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){


var demo = {

yScroll: function(wrapper, scrollable) {
Expand All @@ -49,7 +50,7 @@
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}, 0);
}


Expand All @@ -75,6 +76,7 @@
}
}
}


demo.yScroll('#scroll-pane', 'ul#sortable');

Expand All @@ -89,49 +91,47 @@


<div class="pageWrapper">
<h1>jQuery UI CSS3 CoverFlow 2.1.2</h1>
<div class="demo">

<div class="wrapper">
<div id="coverflow">
<img src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
<img src="img/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
<img src="img/kidrock-bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>
<img src="img/recovery-recovery.jpg" data-artist="Eminem" data-album="Recovery"/>
<img src="img/lilwayne-iamnotahumanbeing.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/>
<img src="img/taylorswift-speaknow.jpg" data-artist="Taylor Swift" data-album="Speak Now"/>
<img src="img/thebandperry-thebandperry.jpg" data-artist="The Band Perry" data-album="The Band Perry"/>
<img src="img/maroon5-handsallover.jpg" data-artist="Maroon 5" data-album="Hands All Over"/>
<img src="img/mychemicalromance-dangerdays.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/>
<img src="img/ironmaiden-thefinalfrontier.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/>
<img src="img/order of the black - black label society.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/>
<img src="img/usher-raymondvraymond.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>
<h1>jQuery UI CSS3 CoverFlow 2.2 (Preview)</h1>
<div class="demo">

<div class="wrapper">
<div id="coverflow">
<img src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
<img src="img/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
<img src="img/kidrock-bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>
<img src="img/recovery-recovery.jpg" data-artist="Eminem" data-album="Recovery"/>
<img src="img/lilwayne-iamnotahumanbeing.jpg" data-artist="Lil Wayne" data-album="I Am Not A Human Being"/>
<img src="img/taylorswift-speaknow.jpg" data-artist="Taylor Swift" data-album="Speak Now"/>
<img src="img/thebandperry-thebandperry.jpg" data-artist="The Band Perry" data-album="The Band Perry"/>
<img src="img/maroon5-handsallover.jpg" data-artist="Maroon 5" data-album="Hands All Over"/>
<img src="img/mychemicalromance-dangerdays.jpg" data-artist="My Chemical Romance" data-album="Danger Days"/>
<img src="img/ironmaiden-thefinalfrontier.jpg" data-artist="Iron Maiden" data-album="The Final Frontier"/>
<img src="img/order of the black - black label society.jpg" data-artist="Order Of The Black" data-album="Black Label Society"/>
<img src="img/usher-raymondvraymond.jpg" data-artist="Usher" data-album="Raymond V Raymond"/>
</div>
</div>

</div>

<div id="imageCaption">
Sample Text
</div>

<div id="imageCaption">
Sample Text
</div>

<div id='slider'></div>
</div>

<div id='slider'></div>
</div>

<div class="demo-description">
</div>

<div class="listholder">
<div class="demo-description">
</div>

<div id="scroll-pane">
<ul id="sortable">
</ul>
</div>
<div class="listholder">
<div id="scroll-pane">
<ul id="sortable">
</ul>
</div>

<div id="slider-wrap">
<div id="slider-vertical"></div>
</div>
<div id="slider-wrap">
<div id="slider-vertical"></div>
</div>
</div>

<div class="pageInfo">
Expand All @@ -140,7 +140,7 @@ <h1>jQuery UI CSS3 CoverFlow 2.1.2</h1>

<div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all">
<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
Compatible with jQueryUI 1.8.9 and jQuery 1.5
Compatible with jQueryUI 1.8.9 and jQuery 1.6.2+
</p>
</div>

Expand Down
Loading

0 comments on commit 68e19de

Please sign in to comment.