From 9474db8576c07f72e0b98d291bd67e56a3d7ba6e Mon Sep 17 00:00:00 2001
From: Roger Rehnelt <noreply@maennchen1.de>
Date: Sat, 3 Oct 2026 12:54:10 +0200
Subject: Produktseite: Bildleiste im Modus „neu“
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Das Produktbild steht groß, darunter die Vorschaubilder als Knöpfe zum Umschalten. Die Demodaten geben dem Probierset vier weitere Bilder.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 views/css/wpsg-theme.css         |  6 ++++++
 views/js/frontend.js             | 18 +++++++++++++++++-
 views/produktseite/produkt.phtml | 27 +++++++++++++++++----------
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 94cbf88..23f6942 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -321,6 +321,12 @@
 .wpsg-product :where(.wpsg-product__media) { flex:1 1 22rem; min-width:0; float:none; margin:0; }
 .wpsg-product :where(.wpsg-product__media .wpsg_produkt_produktbilder) { max-width:none; }
 .wpsg-product :where(.wpsg-product__details) { flex:1 1 20rem; min-width:0; }
+.wpsg-product :where(.wpsg-product__image) { display:block; }
+.wpsg-product :where(.wpsg-product__image img) { display:block; width:100%; height:auto; border-radius:var(--wpsg-radius); }
+.wpsg-product :where(.wpsg-product__thumbs) { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.75em; margin:0.75em 0 0; padding:0; list-style:none; }
+.wpsg-product :where(.wpsg-product__thumb) { display:block; width:100%; padding:0; border:0; border-radius:var(--wpsg-radius); background:none; cursor:pointer; min-height:44px; }
+.wpsg-product :where(.wpsg-product__thumb img) { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--wpsg-radius); }
+.wpsg-product :where(.wpsg-product__thumb[aria-pressed="true"]) { outline:2px solid var(--wpsg-color-accent); outline-offset:2px; }
 .wpsg-product :where(.wpsg-product__details .wpsg_producttitle) { margin-top:0; }
 .wpsg-product :where(.wpsg-product__offer) { display:flex; flex-direction:column; gap:0.25em; margin:0.75em 0; }
 .wpsg-product :where(.wpsg-product__price) { font-size:1.75em; font-weight:700; line-height:1.2; }
diff --git a/views/js/frontend.js b/views/js/frontend.js
index 98b9799..bfae2ea 100644
--- a/views/js/frontend.js
+++ b/views/js/frontend.js
@@ -224,4 +224,20 @@
 		value = value.toString().split('e');
 		return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
 
-	}
\ No newline at end of file
+	}
+
+	/**
+	 * Bildleiste der Produktseite im Modus „neu“: zeigt das gewählte Bild groß (Punkt 8.2)
+	 */
+	document.addEventListener('click', function(event) {
+
+		var thumb = event.target.closest('.wpsg-product__thumb');
+		if (!thumb) return;
+
+		var media = thumb.closest('.wpsg-product__media');
+		var index = thumb.getAttribute('data-wpsg-image');
+
+		media.querySelectorAll('.wpsg-product__image').forEach(function(image) { image.style.display = ((image.getAttribute('data-wpsg-image') === index)?'':'none'); });
+		media.querySelectorAll('.wpsg-product__thumb').forEach(function(button) { button.setAttribute('aria-pressed', ((button === thumb)?'true':'false')); });
+
+	} );
diff --git a/views/produktseite/produkt.phtml b/views/produktseite/produkt.phtml
index 09140d0..8280972 100644
--- a/views/produktseite/produkt.phtml
+++ b/views/produktseite/produkt.phtml
@@ -51,28 +51,35 @@
 
 		?>
 
-		<?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { ?>
+		<?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { $nImages = sizeof($arAttachmentIDsAll); ?>
 		<div class="wpsg_productimages wpsg-product__media">
 
-			<div class="wpsg_produkt_produktbilder">
+			<?php /* Großes Bild, die übrigen verborgen für die Lightbox; darunter die Bildleiste (Punkt 8.2) */ ?>
+			<div class="wpsg_produkt_produktbilder wpsg-product__gallery">
 
-				<?php if (sizeof($arAttachmentIDsAll) > 0) { for ($i = 0; $i < sizeof($arAttachmentIDsAll); $i ++) { ?>
+				<?php foreach ($arAttachmentIDsAll as $i => $attachment_id) { ?>
 
 					<?php /* URL für die Lightbox */ ?>
-					<?php $att = wp_get_attachment_image_src($arAttachmentIDsAll[$i], array(800, 600), false); ?>
+					<?php $att = wp_get_attachment_image_src($attachment_id, 'large', false); ?>
 
-					<meta itemprop="image" content="<?php echo $att[0]; ?>" />
-
-					<a <?php if ($arAttachmentIDsAll[$i] != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo $oProduct->getProductName(); ?>" href="<?php echo $att[0]; ?>" data-fslightbox="<?php echo $this->getTemplateIndex(); ?>">
-
-						<?php echo wp_get_attachment_image($arAttachmentIDsAll[$i], array(300, 300), false, array()); ?>
+					<meta itemprop="image" content="<?php echo esc_url((string)($att[0]??'')); ?>" />
 
+					<a class="wpsg-product__image" <?php if ($attachment_id != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo esc_attr($oProduct->getProductName()); ?>" href="<?php echo esc_url((string)($att[0]??'')); ?>" data-fslightbox="<?php echo $this->getTemplateIndex(); ?>" data-wpsg-image="<?php echo intval($i); ?>">
+						<?php echo wp_get_attachment_image($attachment_id, 'large', false, ['sizes' => '(min-width: 800px) 50vw, 100vw']); ?>
 					</a>
 
-				<?php } } ?>
+				<?php } ?>
 
 			</div>
 
+			<?php if ($nImages > 1) { ?>
+			<ul class="wpsg-product__thumbs">
+				<?php foreach ($arAttachmentIDsAll as $i => $attachment_id) { ?>
+				<li><button type="button" class="wpsg-product__thumb" data-wpsg-image="<?php echo intval($i); ?>" aria-pressed="<?php echo (($attachment_id == $arAttachmentID)?'true':'false'); ?>" aria-label="<?php /* translators: 1: Nummer des Bildes, 2: Anzahl */ echo esc_attr(sprintf(__('Bild %1$d von %2$d anzeigen', 'wpsg'), $i + 1, $nImages)); ?>"><?php echo wp_get_attachment_image($attachment_id, 'thumbnail', false, ['alt' => '']); ?></button></li>
+				<?php } ?>
+			</ul>
+			<?php } ?>
+
 		</div>
 		<?php } ?>
 		<?php /* Block für die Produktbilder ENDE */ ?>
-- 
cgit v1.2.3