Interactive POIs - first part
This commit is contained in:
parent
a4ce4709c3
commit
7a133bafc6
@ -34,6 +34,9 @@ div#preload img {
|
||||
.of-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-body.of-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.pl-lg {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
|
||||
BIN
img/mappa.png
BIN
img/mappa.png
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 2.8 MiB |
@ -43,7 +43,7 @@
|
||||
<div class="columns">
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
|
||||
<a href="map.html">
|
||||
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
<img src="img/map.svg" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
|
||||
|
||||
30
js/fara.js
30
js/fara.js
@ -1,6 +1,36 @@
|
||||
//use strict;
|
||||
localStorage.setItem('online', true);
|
||||
|
||||
/**
|
||||
* Export constants!!
|
||||
* @todo titles, vimeoVids
|
||||
*/
|
||||
export const titles = [
|
||||
|
||||
]
|
||||
|
||||
export const vimeoVids = {
|
||||
'thumb_prologo' : '478632535',
|
||||
'thumb_viaggiatore' : '562518107',
|
||||
'thumb_faresi' : '562529310',
|
||||
'thumb_piazza' : '443587380',
|
||||
'thumb_antonio' : '606341398',
|
||||
'thumb_francesco' : '471773781',
|
||||
'thumb_nobili' : '562534835',
|
||||
'thumb_rocco' : '606346781',
|
||||
'thumb_alberto' : '606372910',
|
||||
'thumb_disputa' : '471537982',
|
||||
'thumb_duomo' : '606343917',
|
||||
'thumb_loredana' : '513080769',
|
||||
'thumb_pietro' : '455576197',
|
||||
'thumb_castello' : '562536148',
|
||||
'thumb_sabini' : '542321131',
|
||||
'thumb_monumento' : '606362546',
|
||||
'thumb_eva' : '606352547',
|
||||
'thumb_toto' : '606348670',
|
||||
'thumb_fuori' : '606358668',
|
||||
'thumb_carro' : '562262086',
|
||||
};
|
||||
/**
|
||||
* 'Slide' background images
|
||||
* in landing page
|
||||
|
||||
62
js/ui-map.js
62
js/ui-map.js
@ -1,3 +1,5 @@
|
||||
//use strict;
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let close = document.querySelector('#mod-vid a[href="#close"]');
|
||||
let mod = document.querySelector('#mod-vid');
|
||||
@ -8,25 +10,69 @@ document.addEventListener('readystatechange', () => {
|
||||
|
||||
});
|
||||
|
||||
function openModal() {
|
||||
function openModal(id) {
|
||||
const modTitles = {
|
||||
'prologo' : 'Itinerario - #0',
|
||||
'viaggiatore' : 'Itinerario - #1',
|
||||
'faresi' : 'Itinerario - #2',
|
||||
'piazza' : 'Itinerario - #3',
|
||||
}
|
||||
|
||||
document.querySelector('.modal-title').innerHTML = modTitles[id];
|
||||
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let modCont = document.querySelector('#mod-cont');
|
||||
let modChildren = Array.from(modCont.children);
|
||||
|
||||
modChildren.forEach(c => {
|
||||
if (c.classList.contains('columns')) {
|
||||
if (c.id === 'col-'+id || c.id.includes('piazza')) {
|
||||
c.classList.remove('hide');
|
||||
}
|
||||
else {
|
||||
c.classList.add('hide');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
modal.classList.add('active');
|
||||
|
||||
let thumb = document.querySelector('.vid-thumb');
|
||||
if (id !== 'piazza' /* && ... */) {
|
||||
let thumb = document.querySelector('#t-'+id);
|
||||
|
||||
thumb.addEventListener('click', () => {
|
||||
openVid(id);
|
||||
});
|
||||
} else {
|
||||
let thumbs = [];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
thumbs.push(document.querySelector(`#t-${id}${i}`));
|
||||
}
|
||||
thumbs.forEach(t => {
|
||||
let img = document.querySelector('#'+t.id+' img');
|
||||
let vidId = img.src.replace(/^(.*)?img\/thumbs\/thumb_(\w+)\.\w+$/i, "$2");
|
||||
|
||||
t.addEventListener('click', () => {
|
||||
openVid(vidId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
thumb.addEventListener('click', () => {
|
||||
openVid(thumb.id);
|
||||
});
|
||||
//modal.style = 'opacity: 1';
|
||||
}
|
||||
|
||||
const openVid = (id) => {
|
||||
|
||||
let titles = {
|
||||
const titles = {
|
||||
'viaggiatore' : 'Il Viaggiatore #1',
|
||||
'prologo' : 'Prologo - Annunciazione',
|
||||
'faresi' : 'Sul carattere dei Faresi #2',
|
||||
'piazza' : 'Piazza Forcina #3',
|
||||
'antonio' : 'Antonio #3a',
|
||||
'francesco' : 'Antonio #3b',
|
||||
}
|
||||
|
||||
let vimeoVids = {
|
||||
const vimeoVids = {
|
||||
'prologo' : '478632535',
|
||||
'viaggiatore' : '562518107',
|
||||
'faresi' : '562529310',
|
||||
|
||||
177
map.html
177
map.html
@ -10,8 +10,8 @@
|
||||
<body>
|
||||
<div>
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="max-height: 100%;">
|
||||
<image href="img/map.svg" height="200" width="200"/>
|
||||
<rect
|
||||
<image href="img/mappa.png" height="200" width="200"/>
|
||||
<!--<rect
|
||||
onclick="openModal()"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
@ -20,18 +20,96 @@
|
||||
id="prologo"
|
||||
style="fill:rgba(155,155,155,0.29);
|
||||
stroke:none;stroke-width:0.3;paint-order:fill markers stroke"
|
||||
/>
|
||||
/>-->
|
||||
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="35.578873"
|
||||
cx="26.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="37"
|
||||
x="25.1"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">0</tspan></text>
|
||||
</g>
|
||||
<g id="viaggiatore" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="111.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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="71"
|
||||
x="110"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">1</tspan></text>
|
||||
</g>
|
||||
<g id="faresi" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="85.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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="71"
|
||||
x="84"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">2</tspan></text>
|
||||
</g>
|
||||
<g id="piazza" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="46.578873"
|
||||
cx="83.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="48"
|
||||
x="82"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">3</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<div class="modal-title h5 roboto">Itinerario - #0 Prologo</div>
|
||||
<div class="modal-title h5 roboto"></div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body of-scroll">
|
||||
<div class="container roboto-slab" id="mod-cont">
|
||||
<div class="columns">
|
||||
<div class="columns hide" id="col-prologo">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Prologo - Annunciazione
|
||||
@ -43,8 +121,91 @@
|
||||
in attesa di un re che farà ritorno…
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
|
||||
<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;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-viaggiatore">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il Viaggiatore #1
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Un viaggiatore, arrivato a Fara Sabina, incontra una strano personaggio
|
||||
che si offre di guidarlo in un viaggio attraverso il borgo che lo
|
||||
porterà a riscoprire il senso della meraviglia.
|
||||
Si comincia dal teatro dove gli attori, attraverso i personaggi
|
||||
che hanno creato in tanti anni di spettacoli,
|
||||
si stanno preparando a rappresentare la "Fara invisibile".
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-faresi">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Sul carattere dei Faresi #2
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato
|
||||
dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta.
|
||||
Ariel, l'eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall'alto,
|
||||
osserva la forma della città e le abitudini dei suoi abitanti, fa magie.
|
||||
Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere
|
||||
contatto con il mondo.
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza1">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Piazza Forcina #3
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
|
||||
piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l'unità d'Italia.
|
||||
Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
|
||||
Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza2">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Antonio #3a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Antonio è un artigiano restauratore del legno, di Fara Sabina.
|
||||
La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
|
||||
al lavoro, allietato dal canto degli uccelli.
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza3">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Francesco #3b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Francesco appartiene ad un'antica famiglia di Fara,
|
||||
negli anni ha raccolto nella sua casa una collezione
|
||||
di oggetti dell'800 e del primo ‘900 che ci
|
||||
raccontano una cultura ormai scomparsa.
|
||||
</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;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user