Add about carousel and interactive services gallery
This commit is contained in:
+166
-1
@@ -159,7 +159,44 @@
|
||||
<p>Komm vorbei und entdecke unser Sortiment – ehrlich, hochwertig und mit Liebe ausgewählt.</p>
|
||||
</div>
|
||||
<div class="about-image">
|
||||
<img src="img/frida.jpg" alt="Frida & Fred Feinkostgeschäft in der Untere Bachgasse, Regensburg – Innenansicht mit Bio-Produkten" class="about-img">
|
||||
<div id="aboutImageCarousel" class="carousel slide carousel-fade about-carousel" data-bs-ride="carousel" data-bs-interval="6500" aria-label="Bildergalerie von Frida & Fred">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Bild 1"></button>
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="1" aria-label="Bild 2"></button>
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="2" aria-label="Bild 3"></button>
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="3" aria-label="Bild 4"></button>
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="4" aria-label="Bild 5"></button>
|
||||
<button type="button" data-bs-target="#aboutImageCarousel" data-bs-slide-to="5" aria-label="Bild 6"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="img/frida.jpg" alt="Innenansicht von Frida & Fred in Regensburg" class="about-carousel-img" loading="eager">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/frida01.jpg" alt="Feinkost und Spezialitaeten bei Frida & Fred" class="about-carousel-img" loading="lazy">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/frida02.jpg" alt="Blick in das Ladenlokal von Frida & Fred" class="about-carousel-img" loading="lazy">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/frida03.jpg" alt="Ausgewaehlte Produkte bei Frida & Fred" class="about-carousel-img" loading="lazy">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/frida04.jpg" alt="Stimmungsbild aus dem Feinkostgeschaeft Frida & Fred" class="about-carousel-img" loading="lazy">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/frida05.jpg" alt="Frida & Fred in der Untere Bachgasse in Regensburg" class="about-carousel-img" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#aboutImageCarousel" data-bs-slide="prev" aria-label="Vorheriges Bild">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Vorheriges Bild</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#aboutImageCarousel" data-bs-slide="next" aria-label="Naechstes Bild">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Naechstes Bild</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,9 +274,66 @@
|
||||
<p>Professionelle Weinverkostungen mit Expertenwissen. Entdecken Sie neue Geschmackserlebnisse!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="services-gallery-wrap">
|
||||
<h3 class="services-gallery-title">Einblicke in unsere Service-Momente</h3>
|
||||
<div class="services-gallery" aria-label="Bildergalerie Services">
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0005.jpg" data-alt="Service Impression 0005" aria-label="Bild vergroessern: Service Impression 0005">
|
||||
<img src="img/services/service_0005.jpg" alt="Service Impression 0005" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0004.jpg" data-alt="Service Impression 0004" aria-label="Bild vergroessern: Service Impression 0004">
|
||||
<img src="img/services/service_0004.jpg" alt="Service Impression 0004" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0007.jpg" data-alt="Service Impression 0007" aria-label="Bild vergroessern: Service Impression 0007">
|
||||
<img src="img/services/service_0007.jpg" alt="Service Impression 0007" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0008.jpg" data-alt="Service Impression 0008" aria-label="Bild vergroessern: Service Impression 0008">
|
||||
<img src="img/services/service_0008.jpg" alt="Service Impression 0008" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0010.jpg" data-alt="Service Impression 0010" aria-label="Bild vergroessern: Service Impression 0010">
|
||||
<img src="img/services/service_0010.jpg" alt="Service Impression 0010" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
<figure class="services-gallery-item">
|
||||
<button type="button" class="services-gallery-button js-services-lightbox" data-full-src="img/services/service_0014.jpg" data-alt="Service Impression 0014" aria-label="Bild vergroessern: Service Impression 0014">
|
||||
<img src="img/services/service_0014.jpg" alt="Service Impression 0014" loading="lazy" class="services-gallery-img">
|
||||
</button>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="servicesImageModal" tabindex="-1" aria-labelledby="servicesImageModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content border-0 bg-transparent">
|
||||
<div class="modal-header border-0 p-0 pb-2 justify-content-end">
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Schliessen"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0 text-center">
|
||||
<div class="services-modal-stage">
|
||||
<button type="button" class="services-modal-nav services-modal-prev" id="servicesModalPrev" aria-label="Vorheriges Service-Bild">
|
||||
<i class="fas fa-chevron-left" aria-hidden="true"></i>
|
||||
</button>
|
||||
<img id="servicesModalImage" src="" alt="" class="services-modal-image">
|
||||
<button type="button" class="services-modal-nav services-modal-next" id="servicesModalNext" aria-label="Naechstes Service-Bild">
|
||||
<i class="fas fa-chevron-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events Section -->
|
||||
<section id="events" class="section-events">
|
||||
<div class="container-fluid px-5">
|
||||
@@ -777,6 +871,77 @@
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Services gallery lightbox
|
||||
const servicesModalEl = document.getElementById('servicesImageModal');
|
||||
const servicesModalImage = document.getElementById('servicesModalImage');
|
||||
const servicesModalPrev = document.getElementById('servicesModalPrev');
|
||||
const servicesModalNext = document.getElementById('servicesModalNext');
|
||||
|
||||
if (servicesModalEl && servicesModalImage && servicesModalPrev && servicesModalNext) {
|
||||
const servicesModal = bootstrap.Modal.getOrCreateInstance(servicesModalEl);
|
||||
const lightboxButtons = Array.from(document.querySelectorAll('.js-services-lightbox'));
|
||||
let activeLightboxIndex = -1;
|
||||
|
||||
const updateModalImage = function(index) {
|
||||
if (!lightboxButtons.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const safeIndex = (index + lightboxButtons.length) % lightboxButtons.length;
|
||||
const activeButton = lightboxButtons[safeIndex];
|
||||
servicesModalImage.src = activeButton.dataset.fullSrc || '';
|
||||
servicesModalImage.alt = activeButton.dataset.alt || '';
|
||||
activeLightboxIndex = safeIndex;
|
||||
};
|
||||
|
||||
lightboxButtons.forEach((button, index) => {
|
||||
button.addEventListener('click', function() {
|
||||
updateModalImage(index);
|
||||
servicesModal.show();
|
||||
});
|
||||
});
|
||||
|
||||
servicesModalPrev.addEventListener('click', function() {
|
||||
if (activeLightboxIndex < 0) {
|
||||
return;
|
||||
}
|
||||
updateModalImage(activeLightboxIndex - 1);
|
||||
});
|
||||
|
||||
servicesModalNext.addEventListener('click', function() {
|
||||
if (activeLightboxIndex < 0) {
|
||||
return;
|
||||
}
|
||||
updateModalImage(activeLightboxIndex + 1);
|
||||
});
|
||||
|
||||
servicesModalEl.addEventListener('keydown', function(event) {
|
||||
if (activeLightboxIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
updateModalImage(activeLightboxIndex - 1);
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
updateModalImage(activeLightboxIndex + 1);
|
||||
}
|
||||
});
|
||||
|
||||
servicesModalEl.addEventListener('shown.bs.modal', function() {
|
||||
servicesModalEl.focus();
|
||||
});
|
||||
|
||||
servicesModalEl.addEventListener('hidden.bs.modal', function() {
|
||||
servicesModalImage.src = '';
|
||||
servicesModalImage.alt = '';
|
||||
activeLightboxIndex = -1;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Back to Top Button -->
|
||||
|
||||
Reference in New Issue
Block a user