forked from coverflowjs/coverflow
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
168 lines (119 loc) · 4.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI CoverFlow 2.1 | Addy Osmani</title>
<!-- Include theme -->
<link type="text/css" href="css/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<!-- Include jQuery and UI -->
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<!-- Include jQuery CoverFlow II widget -->
<script type="text/javascript" src="js/ui.coverflow.js"></script>
<link type="text/css" href="css/demos.css" rel="stylesheet" />
<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
<script src="js/sylvester.js" type="text/javascript"></script>
<script src="js/transformie.js" type="text/javascript"></script>
<!-- Include mousewheel dependancies and app files -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var demo = {
// Faire défiler verticalement des elements
yScroll: function(wrapper, scrollable) {
var wrapper = $(wrapper), scrollable = $(scrollable);
// Preload
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Vérifier que toutes les images sont chargés
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// chrome fix
setTimeout(function(){
loading.hide();
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
var lastTarget;
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
}
}
}
// Appel de la methode
demo.yScroll('#scroll-pane', 'ul#sortable');
});
</script>
</head>
<body>
<div class="pageWrapper">
<h1>jQuery UI CSS3 CoverFlow 2.1</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 id="imageCaption">
Sample Text
</div>
<div id='slider'></div>
</div>
<div class="demo-description">
</div>
<div class="listholder">
<div id="scroll-pane">
<ul id="sortable">
</ul>
</div>
<div id="slider-wrap">
<div id="slider-vertical"></div>
</div>
</div>
<div class="pageInfo">
Interaction supported: Cover-click, Slider, Playlist-click, Bi-Directional Keyboard Navigation, Mouse-Slide, MouseWheel.
<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
</p>
</div>
</div>
</div>
</body>
</html>