Add title to video modal

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. &Egrave; 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">

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');
     });
 })