-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaudioslide-hermes.html
141 lines (108 loc) · 6.29 KB
/
audioslide-hermes.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Un padre para Hermes</title>
<link rel="stylesheet" href="assets/css/reveal.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<div class="audio" >
<audio id="entrevista">
<source src="assets/audios/hermes_teaser.mp3" type="audio/mp3">
</audio>
</div>
<div class="reveal">
<div class="slides">
<section class="slide-aligned-left" data-background-image="assets/images/HermesCruzPared.jpg">
<h1>Un padre para <br>Hermes</h1>
<p>El primer joven <br>bajo tutela de una iglesia <br>luterana en Nueva York.</p>
<a href="#" class="navigate-next" id="comenzar">Comenzar</a>
</section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesManos2.jpg"></section>
<section class="slide-aligned-center">
<p>Hermes Espinosa es uno de los 26 hijos adoptivos del Padre Fabián Arias, el líder de una congregación luterana que es parte del Nuevo Movimiento de Iglesias Santuario. Espinosa cuenta su vida como inmigrante adoptado por la iglesia de Sión.</p>
</section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesLectura2.jpg"></section>
<section class="slide-aligned-center">
<p>“Pensé que era fácil de cruzar y viajar con un carro y ya, pues, estoy en Estados Unidos. No fue así…”</p>
</section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesIglesiaSion.jpg"></section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesPP.jpg"></section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesFabian.jpg"></section>
<section class="slide-aligned-center">
<p>“Ojalá podamos hacer 11 millones... Tanta gente que no puede aplicar a estas bendiciones, ¿no?”</p>
</section>
<section class="slide-aligned-center" data-background-image="assets/images/HermesPE.jpg"></section>
<section class="slide-aligned-center" data-background-image="assets/images/Hermes17.jpg"></section>
<section class="slide-aligned-center">
<p>Con la ayuda de los fieles de Sión y el padre Fabián, Hermes se supera y enfoca en lograr sus metas. Ahora quiere estudiar diseños de moda en el Instituto FIT de Nueva York.</p>
</section>
<section class="slide-aligned-center">
<h2>Un padre para Hermes</h2>
<p>Por: Jesenia De Moya C., Estefanía Hernández y Lidia Hernández Tapia</p>
<p>Entrevistados: Hermes Espinosa y Fabián Arias</p>
<p>Editores: Luis Trelles, Miguel Paz, Cristina Maldonado (Investigación) y David Galavotti (Interactivo)</p>
<p>Para la asignatura Craft II del programa de periodismo bilingüe de la escuela de periodismo de CUNY</p>
<h6><a href="">¿Qué son las iglesias santuario?</a><a href="">La resistencia del padre Fabián</a></h6>
</section>
</div>
</div>
<script src="assets/js/head.min.js"></script>
<script src="assets/js/reveal.js"></script>
<script>
$(document).ready(function() {
// Array para guardar el tiempo en el momento que cambiamos cada slide.
// Cada valor en el array esta expresado en segundos acumulados.
var tiempoTransicion = [5, 24, 40, 56, 69, 83, 104, 115, 135, 150, 160];
// Posición del array tiempoTransicion
var marcaActual = 0;
// Selecciono el objeto de audio.
var entrevista = $('#entrevista');
// Extraigo la duración.
var duracion = entrevista.prop('duration');
// Extraigo la posición actual del audio.
var posicion = entrevista.prop('currentTime');
// Inicio haciendo click en el botón comenzar, para darle "Play" al audio. El slide se ejecuta vía Reveal.js, class="navigate-next"
$('#comenzar').on('click', function() {
entrevista.trigger('play');
});
// Listener o evento que detecta si hubo un cambio en slide.
Reveal.addEventListener( 'slidechanged', function(event, setTime) {
// Si accidentalmente me cambio de slide sin usar el botón comenzar, entonces ejecuto el audio.
// Caso contrario, pongo el audio en pausa y lo vuelvo a cero.
if (Reveal.getState().indexh === 0) {
entrevista.trigger('pause');
entrevista.prop('currentTime',0);
} else {
entrevista.trigger('play');
}
});
// Función para ejecutar siguiende slide.
function cambiarSlide() {
Reveal.next();
marcaActual += 1;
}
// Listener o evento que extrae el tiempo actual del audio.
// Sin función actualmente.
entrevista.on('timeupdate', function() {
posicion = entrevista.prop('currentTime');
if (posicion > 0 && posicion >= tiempoTransicion[marcaActual]) {
cambiarSlide();
}
});
});
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: false,
controls: false,
center: true,
progress: false,
width: "100%",
height: "100%"
});
</script>
</body>
</html>