Permalink
Browse files

updating overall structure of app.js, stripping out irrelevant code, …

…general improvements made. Some additional work remaining
  • Loading branch information...
addyosmani committed Aug 11, 2011
1 parent 9beb662 commit 68e19de3c413c0a202424a3313f3ac3dde6270c2
Showing with 294 additions and 246 deletions.
  1. +4 −2 README
  2. +39 −39 index.html
  3. +233 −199 js/app.js
  4. +7 −6 js/jquery.mousewheel.min.js
  5. +11 −0 js/jquery.mousewheel.min_.js
View
6 README
@@ -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.
View
@@ -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 -->
@@ -26,6 +25,8 @@
<script src="js/app.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
+
+
var demo = {
yScroll: function(wrapper, scrollable) {
@@ -49,7 +50,7 @@
scrollable.slideDown('slow', function(){
enable();
});
- }, 1000);
+ }, 0);
}
@@ -75,6 +76,7 @@
}
}
}
+
demo.yScroll('#scroll-pane', 'ul#sortable');
@@ -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">
@@ -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>
Oops, something went wrong.

0 comments on commit 68e19de

Please sign in to comment.