Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Tidying up code structure and comments

  • Loading branch information...
commit f3de15c108c6d38efb015a8a8c53c2c8f29a4a46 1 parent e263f4c
@addyosmani addyosmani authored
Showing with 111 additions and 106 deletions.
  1. +70 −73 demo/app.js
  2. +4 −5 demo/demo.html
  3. +35 −17 demo/demos.css
  4. +2 −11 ui.coverflow.js
View
143 demo/app.js
@@ -1,79 +1,79 @@
/*
- jQuery UI CoverFlow II for jQueryUI 1.8.6 / core 1.4.4
+ jQuery UI CoverFlow II App for jQueryUI 1.8.6 / core 1.4.4
Copyright Addy Osmani 2010.
*/
$(function() {
- var defaultItem = 0;
- var listContent = "";
+ //cache core component references
var html = $('#demo-frame div.wrapper').html();
var imageCaption = $('#imageCaption');
$('#demo-frame div.wrapper').parent().append(html).end().remove();
-
-
$sliderCtrl = $('#slider');
$coverflowCtrl = $('#coverflow');
- $coverflowImages = $('#coverflow img');
+ $coverflowImages = $coverflowCtrl.find('img');
$sliderVertical = $("#slider-vertical");
-
- //Set the default image index.
- setDefault(7);
+ //app defaults
+ var defaultItem = 0;
+ var listContent = "";
-
- //Set the default item to display on load.
- //Correct indexing
- function setDefault($n){
- defaultItem = $n-1;
- }
-
- //set the image caption
- function setCaption($t)
- {
- imageCaption.html($t);
- }
-
-
- //Initialize CoverFlow
- $coverflowCtrl.coverflow({
- item: defaultItem,
- duration:1200,
- select: function(event, sky)
- {
- skipTo(sky.value);
-
- }
- });
+
+ //Set the default image index.
+ setDefault(7);
+
+
+ //Set the default item to display on load.
+ //Correct indexing
+ function setDefault($n){
+ defaultItem = $n-1;
+ }
+
+ //set the image caption
+ function setCaption($t){
+ imageCaption.html($t);
+ }
+
+
+ //Initialize CoverFlow
+ $coverflowCtrl.coverflow({
+ item: defaultItem,
+ duration:1200,
+ select: function(event, sky)
+ {
+ skipTo(sky.value);
+
+ }
+ });
- //Initialize Slider
- $sliderCtrl.slider({
- min: 0,
- max: $('#coverflow > *').length-1,
- value: defaultItem,
- slide: function(event, ui) {
- $coverflowCtrl.coverflow('select', ui.value, true);
- $('.coverflowItem').removeClass('ui-selected');
- $('.coverflowItem:eq(' + (ui.value) +')').addClass('ui-selected');
- setCaption($('.coverflowItem:eq(' + (ui.value) +')').html());
-
- }
- });
+ //Initialize Horizontal Slider
+ $sliderCtrl.slider({
+ min: 0,
+ max: $('#coverflow > *').length-1,
+ value: defaultItem,
+ slide: function(event, ui) {
+ $coverflowCtrl.coverflow('select', ui.value, true);
+ $('.coverflowItem').removeClass('ui-selected');
+ $('.coverflowItem:eq(' + (ui.value) +')').addClass('ui-selected');
+ setCaption($('.coverflowItem:eq(' + (ui.value) +')').html());
+
+ }
+ });
+
-
- //Skip to an item in the CoverFlow
- function skipTo($itemNumber)
- {
- $sliderCtrl.slider( "option", "value", $itemNumber);
- $coverflowCtrl.coverflow('select', $itemNumber, true);
- $('.coverflowItem').removeClass('ui-selected');
- $('.coverflowItem:eq(' + ($itemNumber) +')').addClass('ui-selected');
- setCaption($('.coverflowItem:eq(' + ($itemNumber) +')').html());
+ //Skip to an item in the CoverFlow
+ function skipTo($itemNumber)
+ {
+ $sliderCtrl.slider( "option", "value", $itemNumber);
+ $coverflowCtrl.coverflow('select', $itemNumber, true);
+ $('.coverflowItem').removeClass('ui-selected');
+ $('.coverflowItem:eq(' + ($itemNumber) +')').addClass('ui-selected');
+ setCaption($('.coverflowItem:eq(' + ($itemNumber) +')').html());
- }
+ }
@@ -96,8 +96,7 @@
skipTo(defaultItem);
//Assign click event for coverflow images
- $('body').delegate('.coverflowItem','click', function()
- {
+ $('body').delegate('.coverflowItem','click', function(){
skipTo($(this).data('itemlink'));
});
@@ -105,21 +104,20 @@
//Handle keyboard events
$(document).keydown(function(e){
+
$current = $sliderCtrl.slider('value');
-
- switch(e.keyCode)
- {
- case 38:
+
+ switch(e.keyCode){
+ case 37:
if($current > 0){
- $current= $current-1;
+ $current--;
skipTo($current);
}
break;
- case 40:
-
+ case 39:
if($current < $('#coverflow > *').length-1){
- $current = $current+1;
+ $current++;
skipTo($current);
}
break;
@@ -128,6 +126,8 @@
});
+
+
//change the main div to overflow-hidden as we can use the slider now
$("#scroll-pane").css('overflow','hidden');
@@ -187,24 +187,21 @@
var coverflowItem = 0;
var cflowlength = $('#coverflow > *').length-1;
-
+ //check the deltas to find out if the user has scrolled up or down
if(delta > 0 && sliderVal > 0){
sliderVal -=1;
}else{
-
- if(delta < 0 && sliderVal < cflowlength)
- {
+ if(delta < 0 && sliderVal < cflowlength){
sliderVal +=1;
}
}
-
-
+
var leftValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
if (leftValue>0) leftValue = 0;//stop the content scrolling down too much
- if (Math.abs(leftValue)>difference) leftValue = (-1)*difference;//stop the content scrolling up too much
+ if (Math.abs(leftValue)>difference) leftValue = (-1)*difference;//stop the content scrolling up beyond point desired
coverflowItem = Math.floor(sliderVal);
skipTo(coverflowItem);
View
9 demo/demo.html
@@ -40,7 +40,7 @@
<div class="wrapper">
<div id="coverflow">
- <img src="images/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
+ <img src="images/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
<img src="images/weezer-hurley.jpg" data-artist="Weezer" data-album="Hurley"/>
<img src="images/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>
<img src="images/kidrock-bornfree.jpg" data-artist="Kid Rock" data-album="Born Free"/>
@@ -56,8 +56,9 @@
</div>
+
+
-
<div id="imageCaption">
Sample Text
</div>
@@ -85,7 +86,7 @@
<div class="pageInfo">
- Interaction supported: Cover-click, Slider, Playlist-click, Keyboard-Navigation, MouseWheel.
+ Interaction supported: Cover-click, Slider, Playlist-click, Bi-Directional Keyboard Navigation, MouseWheel.
<div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all">
@@ -103,7 +104,5 @@
-
-
</body>
</html>
View
52 demo/demos.css
@@ -352,6 +352,17 @@ body {
background: url('images/tile.gif');
}
+
+div.wrapper {
+ height: 390px;
+ width: 800px; /*600*/
+ padding: 10px;
+ overflow: hidden;
+ position: relative;
+ margin: 0 auto;
+
+}
+
#coverflow {
height: 300px;
width: 2600px;
@@ -368,23 +379,7 @@ body {
float: left;
position: relative;
margin: -35px;
-
-/*
--webkit-box-shadow: 1px 1px 6px #292929;
--moz-box-shadow: 1px 1px 6px #292929;
-box-shadow: 1px 1px 6px #292929;
-*/
-
-}
-div.wrapper {
- height: 390px;
- width: 800px; /*600*/
- padding: 10px;
- overflow: hidden;
- position: relative;
- margin: 0 auto;
-
}
#demo-frame {
@@ -514,4 +509,27 @@ border:none;
color:white;
font-size:12px;
text-align:center;
-}
+}
+
+
+
+
+
+
+/*experimental*/
+.reflection
+{
+opacity: 0.5;
+-moz-transform: scale(1.3,-1) rotate(0deg) translate(-50px,-140px);
+-o-transform: scale(1.3,-1) rotate(0deg) translate(-50px,-140px);
+-webkit-transform: scale(1.3,-1) rotate(0deg) translate(-50px,-140px);
+
+ width: 260px;
+ height: 260px;
+ float: left;
+ position: relative;
+ margin: -35px;
+ margin-top:60px;
+}
+
+
View
13 ui.coverflow.js
@@ -18,7 +18,7 @@
options: {
- items: "> *",
+ items: "> *", //> *
orientation: 'horizontal',
item: 0,
trigger: 'click',
@@ -121,33 +121,24 @@
before = (i > from && i != to),
css = { zIndex: self.items.length + (side == "left" ? to-i : i-to) };
-
-
css[($.browser.safari ? 'webkit' : 'Moz')+'Transform'] = 'matrix(1,'+(mod * (side == 'right' ? -0.2 : 0.2))+',0,1,0,0) scale('+(1+((1-mod)*0.3)) + ')';
-
css[self.props[2]] = ( (-i * (self.itemSize/2)) + (side == 'right'? -self.itemSize/2 : self.itemSize/2) * mod );
-
-
if(!supportsTransforms) {
css.width = self.itemWidth * (1+((1-mod)*0.5));
css.height = css.width * (self.itemHeight / self.itemWidth);
css.top = -((css.height - self.itemHeight) / 2);
}
-
-
$(this).css(css);
-
});
-
- //This fixes Safari reflow issues
+
this.element.parent().scrollTop(0);
},
Please sign in to comment.
Something went wrong with that request. Please try again.