Add title to video modal
This commit is contained in:
parent
ca1b821c8d
commit
851e7a6ff2
BIN
img/thumb_alberto.jpg
Normal file
BIN
img/thumb_alberto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
BIN
img/thumb_carro.jpg
Normal file
BIN
img/thumb_carro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
img/thumb_castello.jpg
Normal file
BIN
img/thumb_castello.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
img/thumb_disputa.jpg
Normal file
BIN
img/thumb_disputa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
img/thumb_duomo.jpg
Normal file
BIN
img/thumb_duomo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
img/thumb_eva.jpg
Normal file
BIN
img/thumb_eva.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
BIN
img/thumb_fuori.jpg
Normal file
BIN
img/thumb_fuori.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
img/thumb_loredana.jpg
Normal file
BIN
img/thumb_loredana.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
img/thumb_monumento.jpg
Normal file
BIN
img/thumb_monumento.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB |
BIN
img/thumb_pietro.jpg
Normal file
BIN
img/thumb_pietro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
BIN
img/thumb_rocco.jpg
Normal file
BIN
img/thumb_rocco.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
img/thumb_sabini.jpg
Normal file
BIN
img/thumb_sabini.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
img/thumb_toto.jpg
Normal file
BIN
img/thumb_toto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
245
itinerario.html
245
itinerario.html
@ -123,7 +123,7 @@
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/Thumbnail_Sul carattere dei faresi02.jpg" alt="Prologo">
|
||||
<img src="img/thumb_faresi.jpg" alt="Prologo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -141,7 +141,7 @@
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video del viaggiatore">
|
||||
<img src="img/Thumbnail_Piazza Forcina01.jpg" alt="Viaggiatore #1">
|
||||
<img src="img/thumb_piazza.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -162,7 +162,7 @@
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/Thumbnail_Antonio.jpg" alt="Antonio">
|
||||
<img src="img/thumb_antonio.jpg" alt="Antonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -217,7 +217,7 @@
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_francesco.jpg" alt="Francesco #3b">
|
||||
<img src="img/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -235,6 +235,243 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_alberto.jpg" alt="Alberto">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-small text-italic text-bold">
|
||||
Alberto #5b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Alberto è lo storico appassionato di Fara, scrive e colleziona foto storiche,
|
||||
proseguendo una tradizione di famiglia e rappresenta "il tipico farese".
|
||||
Racconta come è avvenuto lo spopolamento del borgo, nel secondo dopoguerra.
|
||||
Molte cose si sono perse ma, dice, quassù si continua a vivere bene.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Disputa sui dialetti e sui saperi #6
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa intrattiene con una piccola platea in una piazzetta,
|
||||
recitando poesie. Alberto, inizialmente seduto un po’ in disparte,
|
||||
mal sopporta la lingua romanesca di Trilussa e improvvisamente
|
||||
si accende, accusando il poeta di essere un forestiero,
|
||||
un sabotatore in terra sabina. I due intraprendono una
|
||||
accesa disputa sui dialetti e sui saperi... finendo
|
||||
inevitabilmente per parlare di cucina.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Piazza Duomo #7
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Piazza duomo è il cuore del borgo, dove il sacro e il profano
|
||||
si incontrano: la cisterna dell’acqua pubblica, l'antico Monte
|
||||
Frumentario, il forno, il museo, i palazzetti nobiliari,
|
||||
la chiesa, e un panorama magnifico. Ariel si delizia e volteggia
|
||||
nella piazza, tessendo ghirlande da finestra a finestra,
|
||||
compiendo magie e trasformandole architetture del luogo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_loredana.jpg" alt="Loredana">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-small text-italic text-bold">
|
||||
Loredana #7a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Loredana gestisce il forno quattrocentesco di Fara,
|
||||
con suo fratello Angelo e altri abitanti del borgo.
|
||||
Era l’antico forno pubblico del borgo. Loredana racconta
|
||||
come questo forno sia l'espressione del suo forte legame
|
||||
con la famiglia, dalla quale ha imparato l’arte e
|
||||
la gestualità del fare il pane.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_pietro.jpg" alt="Pietro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-small text-italic text-bold">
|
||||
Pietro #7b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Pietro è venuto a vivere a Fara, da Roma.
|
||||
Nel suo palazzo ha raccolto una collezione d’arte africana
|
||||
straordinaria, frutto di cinquant’anni di vita trascorsi in Africa.
|
||||
Ci racconta il suo rapporto di serenità con il borgo,
|
||||
dove l’architettura vive in stupefacente equilibrio con la natura
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_castello.jpg" alt="Il castello">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Il castello #8
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
|
||||
Un tempo ospitava la scuola di musica, l’ospedale, e tante attività del paese.
|
||||
Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori
|
||||
sui trampoli convincono la popolazione ad entrare nel castello,
|
||||
promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri.
|
||||
Così gli abitanti cominciano a dar voce ai loro desideri, fin quando…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
I Sabini ieri e oggi #9
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Gli oggetti del museo di Fara in Sabina vengono proiettati sullo spazio esterno
|
||||
di Piazza Duomo. Uno spettacolo di video-mapping si anima sulle facciate dei palazzi,
|
||||
e viene raccontata la storia dei Sabini attraverso un dialogo drammatizzato fra
|
||||
due personaggi immaginari. Gli abitanti del borgo entrano nello spettacolo,
|
||||
anch'essi proiettati sui muri, e interagiscono con gli oggetti della loro passata cultura.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Il monumento sacro #10
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Lo strano personaggio guida e l’angelo ci accompagnano attraverso la pineta,
|
||||
fino al monumento sacro dei caduti in guerra. Un tumulo recintato e scavato
|
||||
nel banco roccioso, dove gli abitanti del paese si prendono cura dei sentieri
|
||||
e dei fiori o cantano spensieratamente. Un luogo naturale fatto di roccia e memorie,
|
||||
all’ombra gentile dei lecci.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_eva.jpg" alt="Eva">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-small text-italic text-bold">
|
||||
Eva #10a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Eva viveva a Roma ma si è trasferita a Fara. Si chiede quanto a lungo
|
||||
resterà in questo luogo sospeso nello spazio e nel tempo.
|
||||
Ha voluto costruire questo inedito ritratto del borgo,
|
||||
con i nuovi compagni di viaggio protagonisti delle storie,
|
||||
cercando di vivere la bellezza e promuoverla come un valore
|
||||
sociale comune.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_toto.jpg" alt="Toto">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-small text-italic text-bold">
|
||||
Toto #10b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Toto quando era giovane faceva il fuochista alla Croce Rossa di Fara,
|
||||
come tante famiglie del borgo. Questo luogo era in origine un
|
||||
preventorio antitubercolare per bambini che venivano da tutta Italia.
|
||||
Oggi è in rovina ma è ancora pieno di fascino, in un paesaggio bellissimo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="poi">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Fuori Porta #11
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fuori porta è il luogo del pettegolezzo. Da qui passa obbligatoriamente
|
||||
chi entra e chi esce dal borgo, sottoposto agli inevitabili giudizi dei
|
||||
giocatori di carte e di coloro che bighellonano sul muretto.
|
||||
Il personaggio di Acab mette in scena una danza quasi tribale
|
||||
che rappresenta questo rito.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_carro.jpg" alt="Il ritorno del carro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-small text-italic text-bold">
|
||||
Il ritorno del carro #12
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
L’angelo e Ariel si trovano sul Belvedere e improvvisamente compare
|
||||
qualcosa nel cielo. È il presagio di qualcosa che si compie
|
||||
e che si celebrerà con il rito di ri-fondazione della città,
|
||||
all’insegna dell’immaginazione e della felicità.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<a href="#close" class="modal-overlay" aria-label="Close"></a>
|
||||
<div class="modal-container">
|
||||
|
||||
16
js/ui.js
16
js/ui.js
@ -101,6 +101,7 @@ window.addEventListener('load', () => {
|
||||
* and apply video source
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
|
||||
let source = document.querySelector('source');
|
||||
let video = source.parentNode;
|
||||
@ -110,9 +111,16 @@ window.addEventListener('load', () => {
|
||||
*/
|
||||
vidLinks.forEach(a => {
|
||||
let aNodes = a.childNodes;
|
||||
|
||||
// Hacky??
|
||||
let title = a.parentElement
|
||||
.nextElementSibling
|
||||
.firstElementChild
|
||||
.innerHTML
|
||||
.trim();
|
||||
|
||||
a.addEventListener('click', () => {
|
||||
aNodes.forEach(n => {
|
||||
|
||||
if (n.src) {
|
||||
let vStr = n.src
|
||||
.substr(n.src.lastIndexOf('/')+1, n.src.length)
|
||||
@ -124,13 +132,15 @@ window.addEventListener('load', () => {
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('#mod-vid').classList.add('active');
|
||||
modal.classList.add('active');
|
||||
document.querySelector('.modal-title').classList.add('roboto');
|
||||
document.querySelector('.modal-title').innerHTML = title;
|
||||
});
|
||||
});
|
||||
|
||||
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
document.querySelector('#mod-vid').classList.remove('active');
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user