Fabio/my_gallery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

3

Browse source
This commit is contained in:
Fabio 2026-02-21 09:49:54 +01:00
parent b842692346
commit f6e1102508
3 changed files with 37 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app.js
View file

@ -113,7 +113,7 @@ modal.addEventListener('click', (e) => {
// ===============================
// PANNELLO INFO
// PANNELLO INFO + MAPPA
// ===============================
const infoPanel = document.getElementById('infoPanel');
const infoBtn = document.getElementById('modalInfoBtn');
@ -127,6 +127,7 @@ infoBtn.addEventListener('click', () => {
// Cartella estratta dal path
const folder = currentPhoto.path.split('/').slice(2, -1).join('/');
// HTML del pannello
infoPanel.innerHTML = `
<h3>Informazioni</h3>
@ -142,9 +143,27 @@ infoBtn.addEventListener('click', () => {
<div class="info-row"><b>Tipo:</b> ${currentPhoto.mime_type}</div>
<div class="info-row"><b>Cartella:</b> ${folder}</div>
${gps.lat !== '-' ? '<div id="infoMap" class="info-map"></div>' : ''}
`;
infoPanel.classList.add('open');
// Se la foto ha coordinate GPS, crea la mappa
if (gps.lat !== '-' && gps.lng !== '-') {
setTimeout(() => {
const map = L.map('infoMap', {
zoomControl: false,
attributionControl: false
}).setView([gps.lat, gps.lng], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(map);
L.marker([gps.lat, gps.lng]).addTo(map);
}, 50);
}
});
// Chiudi pannello cliccando fuori

3
index.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>Galleria Foto</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
@ -39,7 +40,7 @@
<script>
console.log("Caricamento pagina OK");
</script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>

15
style.css
View file

@ -125,3 +125,18 @@ header {
display: inline-block;
width: 110px;
}
.info-map {
width: 100%;
height: 250px;
margin-top: 15px;
border-radius: 6px;
overflow: hidden;
border: 1px solid #ccc;
}
/* Leaflet */
.leaflet-container {
background: #ddd;
outline: none;
}