From 4c34e04598f1d00ae886bee60bb92c9b433b3b27 Mon Sep 17 00:00:00 2001 From: Hauke Kahrs Date: Mon, 8 Jun 2026 22:31:16 +0200 Subject: [PATCH] Infopanel angepasst --- index.html | 12 +++++++++--- main.js | 47 ++++++++++++++++++++++++++++++++++++++++++++--- style.css | 47 +++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 94 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 26e4036..fc97a82 100644 --- a/index.html +++ b/index.html @@ -95,10 +95,16 @@
- -

Info

-

Bitte wählen Sie eine Punktwolke aus.

+ +

Info

+ + +

Bitte wählen Sie eine Punktwolke aus.

+
diff --git a/main.js b/main.js index 11a2f36..4d8c1e3 100644 --- a/main.js +++ b/main.js @@ -289,15 +289,18 @@ map.once('load', () => { const pointCloudInfo = { first: { title: "1. Fläche unten", - text: "Dies ist die 1. Fläche (unten). Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen." + text: "Dies ist die 1. Fläche (unten). Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.", + images: ["stand1_1.jpeg", "stand1_2.jpeg"] }, second: { title: "2. Felswand", - text: "Dies ist die 2. Felswand. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen." + text: "Dies ist die 2. Felswand. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.", + images: ["stand2_1.jpeg"] }, third: { title: "3. Fläche oben mit Spuren", - text: "Dies ist die 3. Fläche (oben) mit Spuren. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen." + text: "Dies ist die 3. Fläche (oben) mit Spuren. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.", + images: ["stand3_1.jpeg", "stand3_2.jpeg"] }, }; @@ -307,18 +310,56 @@ const infoPanelText = document.getElementById("info-panel-text"); const openInfoPanel = document.getElementById("openInfoPanel"); const closeInfoPanel = document.getElementById("closeInfoPanel"); +let currentImageIndex = 0; + function updateInfoPanel() { const key = document.querySelector('select[name="pointcloud"]').value; const info = pointCloudInfo[key]; + currentImageIndex = 0; if (info) { infoPanelTitle.textContent = info.title; infoPanelText.textContent = info.text; + updateImage(info); } else { infoPanelTitle.textContent = "Info"; infoPanelText.textContent = "Bitte wählen Sie eine Punktwolke aus."; + document.getElementById("info-panel-image").style.display = "none"; + document.getElementById("info-image-nav").style.display = "none"; } } +function updateImage(info) { + const img = document.getElementById("info-panel-image"); + const nav = document.getElementById("info-image-nav"); + const counter = document.getElementById("info-image-counter"); + + img.src = info.images[currentImageIndex]; + img.style.display = "block"; + + if (info.images.length > 1) { + nav.style.display = "flex"; + counter.textContent = `${currentImageIndex + 1} / ${info.images.length}`; + } else { + nav.style.display = "none"; + } +} + +document.getElementById("info-img-prev").addEventListener("click", () => { + const key = document.querySelector('select[name="pointcloud"]').value; + const info = pointCloudInfo[key]; + if (!info) return; + currentImageIndex = (currentImageIndex - 1 + info.images.length) % info.images.length; + updateImage(info); +}); + +document.getElementById("info-img-next").addEventListener("click", () => { + const key = document.querySelector('select[name="pointcloud"]').value; + const info = pointCloudInfo[key]; + if (!info) return; + currentImageIndex = (currentImageIndex + 1) % info.images.length; + updateImage(info); +}); + openInfoPanel.addEventListener("click", () => { infoPanel.classList.add("open"); openInfoPanel.style.display = "none"; diff --git a/style.css b/style.css index eaca620..67e1687 100644 --- a/style.css +++ b/style.css @@ -417,18 +417,17 @@ position: absolute; top: 48%; right: 20px; transform: translateY(-50%); - width: 210px; - padding: 22px; - padding-bottom: 10px; - padding-top: 10px; + width: 340px; + padding: 18px 22px; background: rgba(255,255,255,0.9); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.3); border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 20; + display: none; flex-direction: column; - gap: 8px; + gap: 0; } #info-panel.open { @@ -438,18 +437,54 @@ position: absolute; #closeInfoPanel { align-self: flex-start; padding: 5px 15px; + margin-bottom: 14px; } #info-panel-title { - margin: 0; + margin: 0 0 14px 0; font-size: 14px; font-weight: 600; color: #0f172a; } +#info-panel-image { + width: 100%; + border-radius: 12px; + object-fit: cover; + max-height: 220px; + margin-bottom: 14px; +} + +#info-image-nav { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-bottom: 14px; +} + #info-panel-text { margin: 0; font-size: 13px; line-height: 1.6; color: #1e293b; +} + +#info-img-prev, #info-img-next { + border: none; + background: rgba(255,255,255,0.9); + border-radius: 8px; + padding: 4px 10px; + cursor: pointer; + font-size: 16px; + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +#info-img-prev:hover, #info-img-next:hover { + background: rgb(233,232,232); +} + +#info-image-counter { + font-size: 12px; + color: #555; } \ No newline at end of file