Klein, Mittel und Groß.
im ersten Block hab ich jetzt auf klein gestellt: https://www.niederastroth.de/bildklick.html
HTML Teil:
Code: Alles auswählen
<section data-bs-version="5.1" class="content-gallery" group="Content" mbr-style="{
'padding-top': paddingTop + 'rem',
'padding-bottom': paddingBottom + 'rem',
'background-color': bgColor
}">
<mbr-parameters>
<header>Abstände</header>
<input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="10" step="1" value="9">
<input type="range" inline title="Abstand unten" name="paddingBottom" min="0" max="10" step="1" value="6">
<header>Hintergrund</header>
<input type="color" title="Hintergrundfarbe" name="bgColor" value="#ffcf00">
<header>Galerie</header>
<input type="image" title="Hauptbild (Vorschau)" name="mainImage" value="assets/images/sample1.jpg">
<input type="checkbox" title="Thumbnails anzeigen" name="showThumbs">
<header>Bildgröße</header>
<select title="Hauptbildgröße" name="mainImageSize">
<option value="small" selected>Klein</option>
<option value="medium">Mittel</option>
<option value="large">Groß</option>
</select>
<header>Text</header>
<input type="text" title="Titel" name="title" value="Meine Slideshow mit Text">
<textarea title="Beschreibung" name="text">Klicke auf das Bild, um die Diashow zu öffnen.</textarea>
</mbr-parameters>
<!-- Galerie -->
<div class="container gallery-container" data-folder="galerien/Bilder/">
<div class="row align-items-center">
<!-- Linke Spalte -->
<div class="col-md-6 text-center">
<div class="gallery-preview">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x490.jpg" alt="Hauptbild" class="img-fluid gallery-thumb main-preview" mbr-class="{
'main-small': mainImageSize == 'small',
'main-medium': mainImageSize == 'medium',
'main-large': mainImageSize == 'large'
}">
<div class="gallery-thumbs mt-3" mbr-class="{'d-none': !showThumbs}"></div>
</div>
</div>
<!-- Rechte Spalte -->
<div class="col-md-6">
<h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-theme-style="display-5" mbr-text="title">Meine Slideshow mit Text</h3>
<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-text="text">Klicke auf das Bild, um die Diashow zu öffnen.</p>
</div>
</div>
</div>
<!-- Lightbox -->
<div class="lightbox">
<span class="close">×</span>
<div class="lightbox-content">
<img class="lightbox-image" src alt>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
<script>
(function() {
const currentScript = document.currentScript;
const section = currentScript.closest('.content-gallery');
if (!section) return;
const galleryId = 'gallery-' + Math.random().toString(36).substr(2, 9);
const container = section.querySelector('.gallery-container');
let imageFolder = container.getAttribute('data-folder') || 'galerien/Bilder/';
const mainPreview = section.querySelector('.main-preview');
const thumbsContainer = section.querySelector('.gallery-thumbs');
const lightbox = section.querySelector('.lightbox');
const lightboxImage = section.querySelector('.lightbox-image');
const closeBtn = section.querySelector('.close');
const prevBtn = section.querySelector('.prev');
const nextBtn = section.querySelector('.next');
if (imageFolder && !imageFolder.endsWith('/')) imageFolder += '/';
let galleryImages = [];
let currentSlide = 0;
// --- Galerie-Bilder laden ---
async function loadGalleryImages() {
try {
const response = await fetch(imageFolder);
const text = await response.text();
const doc = new DOMParser().parseFromString(text, 'text/html');
galleryImages = [...doc.querySelectorAll('a')]
.map(a => a.getAttribute('href'))
.filter(h => h && h.match(/\.(jpg|jpeg|png|gif|webp)$/i))
.map(h => imageFolder + h);
thumbsContainer.innerHTML = '';
galleryImages.forEach((src, i) => {
const thumb = document.createElement('img');
thumb.src = src;
thumb.className = 'img-fluid gallery-thumb-small';
thumb.alt = 'Bild ' + (i + 1);
thumb.addEventListener('click', () => openGallery(i));
thumbsContainer.appendChild(thumb);
});
if (galleryImages.length) {
mainPreview.src = galleryImages[0];
}
} catch (e) {
console.error('[' + galleryId + '] Fehler beim Laden:', e);
}
}
// --- Lightbox öffnen / schließen ---
function openGallery(index) {
if (!galleryImages.length) return;
currentSlide = index;
lightbox.style.display = "block";
showSlide(currentSlide);
}
function closeGallery() {
lightbox.style.display = "none";
}
function changeSlide(n) {
if (!galleryImages.length) return;
currentSlide = (currentSlide + n + galleryImages.length) % galleryImages.length;
showSlide(currentSlide);
}
function showSlide(n) {
lightboxImage.src = galleryImages[n];
}
// --- Event-Verknüpfungen ---
function setupEvents() {
if (mainPreview) {
mainPreview.style.cursor = "zoom-in";
mainPreview.addEventListener("click", () => openGallery(0));
}
if (closeBtn) closeBtn.addEventListener("click", closeGallery);
if (prevBtn) prevBtn.addEventListener("click", () => changeSlide(-1));
if (nextBtn) nextBtn.addEventListener("click", () => changeSlide(1));
document.addEventListener("keydown", e => {
if (e.key === "Escape") closeGallery();
if (e.key === "ArrowLeft") changeSlide(-1);
if (e.key === "ArrowRight") changeSlide(1);
});
}
// Initialisierung
document.addEventListener("DOMContentLoaded", () => {
setupEvents();
loadGalleryImages();
});
})();
</script>
</section>CSS Teil:
Code: Alles auswählen
.main-small {
max-width: 300px;
transition: all 0.3s ease-in-out;
}
.main-medium {
max-width: 500px;
transition: all 0.3s ease-in-out;
}
.main-large {
max-width: 800px;
transition: all 0.3s ease-in-out;
}
.main-preview {
cursor: zoom-in;
transition: transform 0.2s ease-in-out;
}
.main-preview:hover {
transform: scale(1.02);
}
.gallery-thumb-small {
width: 100px;
height: auto;
margin: 5px;
border-radius: 6px;
cursor: pointer;
transition: transform 0.2s ease;
}
.gallery-thumb-small:hover {
transform: scale(1.1);
}
.lightbox {
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.lightbox-content {
position: relative;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.lightbox-image {
max-width: 90%;
max-height: 80vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
display: block;
margin: 0 auto;
}
.lightbox .close {
position: absolute;
top: 10px;
right: 25px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.lightbox .prev, .lightbox .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 30px;
user-select: none;
transition: color 0.2s ease-in-out;
}
.lightbox .prev {
left: 0;
}
.lightbox .next {
right: 0;
}
.lightbox .prev:hover, .lightbox .next:hover {
color: #ffcf00;
}
