Interactive POIs - to n. 9
This commit is contained in:
parent
df4da1d5d9
commit
b7a9d304af
@ -444,6 +444,9 @@ video, .open-vid {
|
||||
color: var(--white);
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
.vid-thumb > img {
|
||||
cursor: pointer;
|
||||
}
|
||||
/*
|
||||
.vid-thumb::before {
|
||||
content: "";
|
||||
|
||||
26
js/ui-map.js
26
js/ui-map.js
@ -18,8 +18,18 @@ function openModal(id) {
|
||||
'piazza' : 'Itinerario - #3',
|
||||
'nobili' : 'Itinerario - #4',
|
||||
'rocco' : 'Itinerario - #5',
|
||||
'disputa' : 'Itinerario - #6',
|
||||
'duomo' : 'Itinerario - #7',
|
||||
'castello' : 'Itinerario - #8',
|
||||
'sabini' : 'Itinerario - #9',
|
||||
}
|
||||
|
||||
const multiVid = {
|
||||
'piazza' : 3,
|
||||
'rocco' : 2,
|
||||
'duomo' : 3,
|
||||
};
|
||||
|
||||
document.querySelector('.modal-title').innerHTML = modTitles[id];
|
||||
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
@ -29,7 +39,7 @@ function openModal(id) {
|
||||
modChildren.forEach(c => {
|
||||
if (c.classList.contains('columns')) {
|
||||
if (c.id === 'col-'+id ||
|
||||
(c.id.includes('piazza') && id.includes('piazza'))) {
|
||||
(c.id.includes(id) && Object.keys(multiVid).includes(id))) {
|
||||
c.classList.remove('hide');
|
||||
}
|
||||
else {
|
||||
@ -40,7 +50,7 @@ function openModal(id) {
|
||||
|
||||
modal.classList.add('active');
|
||||
|
||||
if (id !== 'piazza' /* && ... */) {
|
||||
if (!Object.keys(multiVid).includes(id)) {
|
||||
let thumb = document.querySelector('#t-'+id);
|
||||
|
||||
thumb.addEventListener('click', () => {
|
||||
@ -48,7 +58,7 @@ function openModal(id) {
|
||||
});
|
||||
} else {
|
||||
let thumbs = [];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
for (let i = 1; i <= multiVid[id]; i++) {
|
||||
thumbs.push(document.querySelector(`#t-${id}${i}`));
|
||||
}
|
||||
thumbs.forEach(t => {
|
||||
@ -60,9 +70,6 @@ function openModal(id) {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//modal.style = 'opacity: 1';
|
||||
}
|
||||
|
||||
const openVid = (id) => {
|
||||
@ -76,6 +83,13 @@ const openVid = (id) => {
|
||||
'francesco' : 'Francesco #3b',
|
||||
'nobili' : 'I Nobili di Fara #4',
|
||||
'rocco' : 'Rocco si è svegliato #5',
|
||||
'alberto' : 'Alberto #5b',
|
||||
'disputa' : 'Disputa sui dialetti e sui saperi #6',
|
||||
'duomo' : 'Piazza Duomo #7',
|
||||
'loredana' : 'Loredana #7a',
|
||||
'pietro' : 'Pietro #7b',
|
||||
'castello' : 'Il castello #8',
|
||||
'sabini' : 'I Sabini ieri e oggi #9',
|
||||
}
|
||||
const vimeoVids = {
|
||||
'prologo' : '478632535',
|
||||
|
||||
219
map.html
219
map.html
@ -139,6 +139,86 @@
|
||||
id="tspan835"
|
||||
sodipodi:role="line">5</tspan></text>
|
||||
</g>
|
||||
<g id="disputa" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="68.578873"
|
||||
cx="60.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="70"
|
||||
x="59"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">6</tspan></text>
|
||||
</g>
|
||||
<g id="duomo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="93.578873"
|
||||
cx="89.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="95"
|
||||
x="88"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">7</tspan></text>
|
||||
</g>
|
||||
<g id="castello" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="95.578873"
|
||||
cx="104.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="97"
|
||||
x="103"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">8</tspan></text>
|
||||
</g>
|
||||
<g id="sabini" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="87.578873"
|
||||
cx="88.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="89"
|
||||
x="87"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">9</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
@ -162,7 +242,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-viaggiatore">
|
||||
@ -180,7 +260,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-viaggiatore">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-faresi">
|
||||
@ -198,7 +278,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-faresi">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza1">
|
||||
@ -214,7 +294,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza1">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza2">
|
||||
@ -229,7 +309,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza2">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza3">
|
||||
@ -245,7 +325,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza3">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-nobili">
|
||||
@ -264,10 +344,10 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-nobili">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara" style="cursor: pointer;">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-rocco">
|
||||
<div class="columns hide" id="col-rocco1">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Rocco si è svegliato #5
|
||||
@ -281,10 +361,129 @@
|
||||
il borgo popolato come era allora.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato" style="cursor: pointer;">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco1">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-rocco2">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 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-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco2">
|
||||
<img src="img/thumbs/thumb_alberto.jpg" alt="Alberto" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-disputa">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Disputa sui dialetti e sui saperi #6
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa recita poesie davanti una piccola platea in una piazzetta.
|
||||
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 in terra sabina.
|
||||
I due intraprendono una accesa disputa sui dialetti e sui cibi.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-disputa">
|
||||
<img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo1">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 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 vid-thumb" id="t-duomo1">
|
||||
<img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 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 class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-duomo2">
|
||||
<img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-duomo3">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 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 vid-thumb" id="t-duomo3">
|
||||
<img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-castello">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 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 le tante attività del paese. Oggi è quasi in abbandono.
|
||||
Due imbonitori convincono la popolazione ad entrare, 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 class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-castello">
|
||||
<img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-sabini">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 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 vid-thumb" id="t-sabini">
|
||||
<img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user