Skip to content

Commit 865a02e

Browse files
MartijnMartijn
Martijn
authored and
Martijn
committed
Initial
0 parents  commit 865a02e

7 files changed

+514
-0
lines changed

‎index.html

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>jQuery Coverflow</title>
6+
7+
<!-- jQuery/jQueryUI (hosted) -->
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
9+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>
10+
11+
<!-- Optional: Reflection -->
12+
<script type="text/javascript" src="reflection.js"></script>
13+
14+
<!-- Mousewheel -->
15+
<script src="jquery.mousewheel.min.js"></script>
16+
17+
<!-- interpolate, depends on jQ 1.8.0+ -->
18+
<script src="jquery.interpolate.js"></script>
19+
20+
<!-- Coverflow -->
21+
<script src="jquery.coverflow.js"></script>
22+
23+
<style>
24+
body {
25+
font-family: "Segoe UI", Verdana, Helvetica, Arial, sans-serif;
26+
font-size: 11px;
27+
}
28+
29+
.coverflow {
30+
height: 100px;
31+
border-bottom: solid 2px black;
32+
}
33+
34+
.coverflow .cover {
35+
width: 100px;
36+
height: 100px;
37+
cursor: pointer;
38+
background-color: #eee;
39+
font-size: 500%;
40+
border: solid 2px black;
41+
text-align: center;
42+
}
43+
44+
.coverflow .cover.current {
45+
opacity: 1;
46+
background: white;
47+
border-bottom: none;
48+
}
49+
50+
/* CD covers */
51+
.cdcovers .cover {
52+
cursor: pointer;
53+
/*-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255, 255, 255, .5)));*/
54+
}
55+
56+
#cdcovers-info {
57+
position: relative;
58+
top: 300px;
59+
text-align: center;
60+
z-index: 1000;
61+
}
62+
63+
#cdcovers-artist {
64+
font-size: 200%;
65+
font-weight: bold;
66+
}
67+
68+
#cdcovers-album {
69+
font-size: 150%;
70+
}
71+
</style>
72+
73+
<script>
74+
$(function() {
75+
76+
// Alphabet
77+
78+
$('.coverflow').coverflow();
79+
80+
$('#first').click(function() {
81+
$('.coverflow').coverflow('index', 0);
82+
});
83+
84+
$('#last').click(function() {
85+
$('.coverflow').coverflow('index', -1);
86+
});
87+
88+
/* CD covers */
89+
90+
if ($.fn.reflect) {
91+
$('.cdcovers .cover').reflect();
92+
}
93+
94+
// $('#cdcovers').click(function() {
95+
$('.cdcovers').coverflow({
96+
index:3,
97+
width: 256,
98+
height: 256,
99+
visible: 'density',
100+
middleCss: {
101+
opacity: 1
102+
},
103+
outerCss: {
104+
opacity: .1
105+
},
106+
107+
change: function(event, cover) {
108+
$('#cdcovers-artist').text($(cover).data('artist') || 'Unknown artist');
109+
$('#cdcovers-album').text($(cover).data('album') || 'Unknown album');
110+
}
111+
});
112+
// });
113+
});
114+
</script>
115+
</head>
116+
<body>
117+
<div class="coverflow">
118+
<div class="cover">A</div>
119+
<div class="cover">B</div>
120+
<div class="cover">C</div>
121+
<div class="cover">D</div>
122+
<div class="cover">E</div>
123+
<div class="cover">F</div>
124+
<div class="cover">G</div>
125+
<div class="cover">H</div>
126+
<div class="cover">I</div>
127+
<div class="cover">J</div>
128+
<div class="cover">K</div>
129+
<div class="cover">L</div>
130+
<div class="cover">M</div>
131+
<div class="cover">N</div>
132+
<div class="cover">O</div>
133+
<div class="cover">P</div>
134+
<div class="cover">Q</div>
135+
<div class="cover">R</div>
136+
<div class="cover">S</div>
137+
<div class="cover">T</div>
138+
<div class="cover">U</div>
139+
<div class="cover">V</div>
140+
<div class="cover">W</div>
141+
<div class="cover">X</div>
142+
<div class="cover">Y</div>
143+
<div class="cover">Z</div>
144+
</div>
145+
<button id="first">first</button>
146+
<button id="last">last</button>
147+
148+
<button id="cdcovers">Enable!</button>
149+
<div class="cdcovers">
150+
<img class="cover" data-artist="Beatles" src="http://lifethroughmervaseyes.files.wordpress.com/2013/02/abbey-road-album-cover.jpeg?w=652"/>
151+
<img class="cover" data-artist="Nirvana" data-album="Nevermind" src="http://www.rockband.com/assets/thumbs/breed.png"/>
152+
<img class="cover" data-artist="Bruce Springsteen" src="http://0.static.wix.com/media/a98d01_85e7d416b99b8ab1984589dce8046deb.jpg_256"/>
153+
<img class="cover" data-artist="Sigur Rós" src="https://si0.twimg.com/profile_images/3251255990/8a7de15b8e780c8eda9d6248f9d6231d.jpeg"/>
154+
<img class="cover" data-artist="Red Hot Chili Peppers" data-album="Mother's Milk" src="http://0.static.wix.com/media/106148_fca33a6a954184ef77c8e8aefcb06fce.jpg_256"/>
155+
<img class="cover" data-artist="Faith No More" src="http://www.rockband.com/assets/thumbs/midlifecrisis.png"/>
156+
<img class="cover" data-artist="Queens of the Stone Age" src="http://0.static.wix.com/media/217a5d_2267539d9cad38abb2432b62bb81a2a7.jpg_256"/>
157+
<img class="cover" data-artist="At the Drive-in" data-album="Relationship of Command" src="http://www.rockband.com/assets/thumbs/onearmedscissors.png"/>
158+
<img class="cover" data-artist="Don McLean" src="http://www.rockband.com/assets/thumbs/americanpie.png"/>
159+
<img class="cover" data-artist="Weezer" src="http://www.rockband.com/assets/thumbs/mynameisjonas.png"/>
160+
<img class="cover" data-artist="Elvis Costello" src="http://www.rockband.com/assets/thumbs/radioradio.png"/>
161+
<img class="cover" data-artist="Deep Purple" src="http://www.rockband.com/assets/thumbs/smokeonthewater.png"/>
162+
<img class="cover" data-artist="Johnny Cash" src="http://www.rockband.com/assets/thumbs/folsomprisonblues.png"/>
163+
<img class="cover" data-artist="Jimi Hendrix" src="http://www.rockband.com/assets/thumbs/thirdstonefromthesun.png"/>
164+
<img class="cover" data-artist="The Who" data-album="Tommy" src="http://www.rockband.com/assets/thumbs/amazingjourney.png"/>
165+
<img class="cover" data-artist="Doors" data-album="Waiting for the Sun" src="http://www.rockband.com/assets/thumbs/helloiloveyou.png"/>
166+
</div>
167+
<div id="cdcovers-info">
168+
<div id="cdcovers-artist"></div>
169+
<div id="cdcovers-album"></div>
170+
</div>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)