Skip to content

Commit b8b8fc4

Browse files
superkebabsuperkebab
committed
Merge pull request #3 from serut/master
je prends
2 parents ca3eae3 + aaf520d commit b8b8fc4

File tree

2 files changed

+81
-38
lines changed

2 files changed

+81
-38
lines changed

‎imagesLoaded.pkgd.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 74 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11

22
<!DOCTYPE html>
3-
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
4-
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
5-
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
63
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
74
<head>
85
<meta charset="utf-8">
@@ -11,45 +8,58 @@
118
<title>Hitman sampler</title>
129
<link rel="icon" href="favicon.ico"/>
1310
</head>
14-
<span class="content" data-sound="part3" data-speed="1000">
15-
<img src="img/hum.png" class="first">
16-
<img src="img/hum1.png" class="second" style="display:none;">
17-
</span>
18-
<span class="content" data-sound="part4" data-speed="140">
19-
<img src="img/PhiFerme.png" class="first">
20-
<img src="img/PhiOuvert.png" class="second" style="display:none;">
21-
</span>
22-
<span class="content" data-sound="part45" data-speed="110">
23-
<img src="img/PhiFerme.png" class="first">
24-
<img src="img/PhiOuvert.png" class="second" style="display:none;">
25-
</span>
26-
<span class="content" data-sound="part5" data-speed="110">
27-
<img src="img/PhiFerme.png" class="first">
28-
<img src="img/PhiOuvert.png" class="second" style="display:none;">
29-
</span>
30-
<span class="content" data-sound="part6" data-speed="175">
31-
<img src="img/TaGueuleOuv.png" class="first">
32-
<img src="img/TaGueuleOuvGrd.png" class="second" style="display:none;">
33-
</span>
34-
<span class="content" data-sound="part65" data-speed="130">
35-
<img src="img/TaGueuleOuv.png" class="first">
36-
<img src="img/TaGueuleOuvGrd.png" class="second" style="display:none;">
37-
</span>
38-
<span class="content" data-sound="part7" data-speed="150">
39-
<img src="img/SalaudFer.png" class="first">
40-
<img src="img/SalaudOuv.png" class="second" style="display:none;">
41-
</span>
42-
<span class="content" data-sound="part8" data-speed="175">
43-
<img src="img/Vazy1.png" class="first">
44-
<img src="img/Vazy2.png" class="second" style="display:none;">
45-
</span>
11+
<body>
12+
<div id="load" style="display:center;">
13+
<p id="loading">Chargement en cours ... (<span id="imgLoaded"></span>/<span id="nbImage"></span>)</p>
14+
<button id="askNextStep" onclick="nextStep()" style="display:none;">Etape suivante</button>
15+
</div>
4616

17+
<div id="sampler" style="display:none;">
18+
<span class="content" data-sound="part3" data-speed="1000">
19+
<img src="img/hum.png" class="first">
20+
<img src="img/hum1.png" class="second" style="display:none;">
21+
</span>
22+
<span class="content" data-sound="part4" data-speed="140">
23+
<img src="img/PhiFerme.png" class="first">
24+
<img src="img/PhiOuvert.png" class="second" style="display:none;">
25+
</span>
26+
<span class="content" data-sound="part45" data-speed="110">
27+
<img src="img/PhiFerme.png" class="first">
28+
<img src="img/PhiOuvert.png" class="second" style="display:none;">
29+
</span>
30+
<span class="content" data-sound="part5" data-speed="110">
31+
<img src="img/TaGueuleOuv.png" class="first">
32+
<img src="img/TaGueuleOuvGrd.png" class="second" style="display:none;">
33+
</span>
34+
<span class="content" data-sound="part6" data-speed="175">
35+
<img src="img/TaGueuleOuv.png" class="first">
36+
<img src="img/TaGueuleOuvGrd.png" class="second" style="display:none;">
37+
</span>
38+
<span class="content" data-sound="part65" data-speed="130">
39+
<img src="img/TaGueuleOuv.png" class="first">
40+
<img src="img/TaGueuleOuvGrd.png" class="second" style="display:none;">
41+
</span>
42+
<span class="content" data-sound="part7" data-speed="150">
43+
<img src="img/SalaudFer.png" class="first">
44+
<img src="img/SalaudOuv.png" class="second" style="display:none;">
45+
</span>
46+
<span class="content" data-sound="part8" data-speed="175">
47+
<img src="img/Vazy1.png" class="first">
48+
<img src="img/Vazy2.png" class="second" style="display:none;">
49+
</span>
50+
</div>
51+
</body>
4752
<script type="text/javascript" src="buzz.min.js"></script>
4853
<script type="text/javascript" src="jquery.min.js"></script>
49-
54+
<script type="text/javascript" src="imagesLoaded.pkgd.min.js"></script>
5055
<script type="text/javascript">
56+
5157
var sounds = {}; // contains all instance of music
5258

59+
60+
/**
61+
* Loading pictures
62+
*/
5363
var el = {
5464
'0' : {
5565
id: 'intro',
@@ -92,15 +102,41 @@
92102
url: '06-5.ogg'
93103
},
94104
}
95-
//
96105
for( var i in el ) {
97-
sounds[el[i]['id']] = new buzz.sound(el[i]['url']);
106+
sounds[el[i]['id']] = new buzz.sound(el[i]['url']).bind("loadeddata", function(e) {
107+
elementLoaded();
108+
});
98109
}
110+
var nbContentSound = parseInt(i)+1, nbContent,nbContentLoaded = 0;
111+
$('body').imagesLoaded().progress(function(instance,image){
112+
nbContent = nbContentSound + instance.images.length;
113+
elementLoaded();
114+
});
115+
function elementLoaded(){
116+
nbContentLoaded++;
117+
$('#load #imgLoaded').html(nbContentLoaded);
118+
$('#load #nbImage').html(nbContent);
119+
if(nbContentLoaded == nbContent){
120+
$('#load #askNextStep').show();
121+
$('#load #loading').hide();
122+
}
123+
}
124+
function nextStep(){
125+
$('#load').hide();
126+
$('#sampler').show();
127+
}
128+
129+
/**
130+
* Launch music
131+
*/
99132
sounds['intro'].play().bind("ended", function(e) {
100133
sounds['music'].loop();
101134
sounds['music'].play();
102135
})
103136

137+
/**
138+
* Bind
139+
*/
104140
var pictures = {};
105141
$(function() {
106142
$('.content').each(function(){

0 commit comments

Comments
 (0)