Lightbox mit Zoom der Bilder
Klicke auf ein Bild, um die Lightbox zu öffnen und verwende die + / - Tasten zum Zoomen.
Am Desktop kannst du das Mausrad nutzen, oder zoom mit deinen Fingern auf einem Touchdisplay.
Diese Lightbox habe ich fast unverändert von der künstlichen Intelligenz ChatGPT erstellen lassen.
Ich habe dazu folgende Anweisung zur Generierung eingetragen:
"Kannst Du ein JavaScript erstellen, um das Bild einer Lightbox zoomen zu können."
Selbstverständlich müsst ihr die Bilder, die ihr verwenden möchtet, zunächst mit einem FTP-Programm wie FileZilla auf den Server in ein Verzeichnis eurer Wahl hochladen. Anschließend könnt ihr diese Bilder mit der absoluten URL verlinken. In diesem Beispiel habe ich das Verzeichnis "lightbox-ai" genannt.
HTML
Hier das Skript zur Anzeige, das ich in einen einfachen Textblock aus der Rubrik "Article" vom Standard-Thema "Mobirise5", anstelle des Beispieltextes, in den Bereich "HTML Editor" vom "Code Editor" kopiert habe.
In der class="lightbox" hat die KI ein leeres "img src" generiert, dass vom Mobirise "Code Editor" so nicht angenommen wird. Insofern habe ich dort irgendein Bild mit dessen absoluter URL an meinem Server eingetragen.
<!-- Start Lightbox AI -->
<div class="d-flex justify-content-center">
<div class="gallery">
<img src="https://www.mobirise-tutorials.com/Tutorials-3/lightbox-ai/image1.jpg" alt="Image 1" class="gallery-item">
<img src="https://www.mobirise-tutorials.com/Tutorials-3/lightbox-ai/image2.jpg" alt="Image 2" class="gallery-item">
<img src="https://www.mobirise-tutorials.com/Tutorials-3/lightbox-ai/image3.jpg" alt="Image 3" class="gallery-item">
<img src="https://www.mobirise-tutorials.com/Tutorials-3/lightbox-ai/image4.jpg" alt="Image 4" class="gallery-item">
<!-- Add more images as needed -->
</div>
<div class="lightbox" id="lightbox">
<span class="close btn btn-secondary">×</span>
<img src="https://www.mobirise-tutorials.com/Tutorials-3/lightbox-ai/image1.jpg" class="lightbox-content" id="lightbox-content">
<div class="zoom-controls">
<button class="btn btn-secondary" id="zoom-in">+</button>
<button class="btn btn-secondary" id="zoom-out">-</button>
</div>
</div>
</div>
<!-- End Lightbox AI -->
CSS
Die folgende CSS habe ich in den gleichen Block in den Bereich "CSS Editor" vom "Code Editor" kopiert:
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-item {
width: 250px;
margin: 10px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.gallery-item:hover {
transform: scale(1.05);
}
.lightbox {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: scroll;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox-content {
max-width: 80%;
max-height: 80%;
border-radius: 20px;
transition: transform 0.2s;
}
.close {
position: absolute;
top: 80px;
right: 30px;
color: white;
font-size: 30px;
line-hight: 30px;
font-weight: bold;
cursor: pointer;
z-index: 1000;
}
.zoom-controls {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
}
JavaScript
In diesem JavaScript habe ich die KI "ChatGPT" zweimal um eine Überarbeitung gebeten, um zu erreichen, dass ich am Desktop das Mausrad und auf mobilen Geräten das Touchdisplay zum Zoomen verwenden kann. Letzteres macht eigentlich nicht viel Sinn, da man auf einem mobilen Gerät das Display ohnehin jederzeit mit den Fingern vergrößern kann:
"Kannst Du bitte noch eine zusätzlich Zoom-Funktion über das Mausrad zum Skript hinzufügen. Die Buttons Plus und Minus sollen aber trotzdem erhalten bleiben."
"Kannst Du das Skript noch erweitern, damit man die Größenänderung zusätzlich auch am Touchdisplay vornehmen kann."
Das JavaScript habe ich in den Seiteneinstellungen im Bereich "End of <body> code" eingefügt.
Den Zoom-Faktor stellt ihr bei der konstanten Variable "scaleStep" ein, hier = 0.2. Für das Touchdisplay stellt ihr bei der konstanten Variable "touchScaleStep" die Skalierung etwas langsamer ein, hier = 0.05.
Die Verkleinerung habe ich an den Tasten und am Mausrad auf 0.5 sowie am Touchscreen auf 1 begrenzt:
<!-- Lightbox JavaScript created by Tommy with AI -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const galleryItems = document.querySelectorAll('.gallery-item');
const lightbox = document.getElementById('lightbox');
const lightboxContent = document.getElementById('lightbox-content');
const closeBtn = document.querySelector('.close');
const zoomInBtn = document.getElementById('zoom-in');
const zoomOutBtn = document.getElementById('zoom-out');
let scale = 1;
const scaleStep = 0.2; // Zoom factor
const touchScaleStep = 0.05; // Slow down zoom factor for touch gestures
// Variables for touch gestures
let initialDistance = null;
galleryItems.forEach(item => {
item.addEventListener('click', () => {
lightbox.style.display = 'flex';
lightboxContent.src = item.src;
lightboxContent.style.transform = `scale(${scale})`;
});
});
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
scale = 1;
lightboxContent.style.transform = `scale(${scale})`;
});
zoomInBtn.addEventListener('click', () => {
scale += scaleStep;
lightboxContent.style.transform = `scale(${scale})`;
});
zoomOutBtn.addEventListener('click', () => {
scale = Math.max(scale - scaleStep, 0.5); // Prevent scaling below 0.5
lightboxContent.style.transform = `scale(${scale})`;
});
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
scale = 1;
lightboxContent.style.transform = `scale(${scale})`;
}
});
// Zoom with mouse wheel
lightboxContent.addEventListener('wheel', (e) => {
e.preventDefault();
if (e.deltaY < 0) {
scale += scaleStep;
} else {
scale = Math.max(scale - scaleStep, 0.5); // Prevent scaling below 0.5
}
lightboxContent.style.transform = `scale(${scale})`;
});
// Touch gestures for pinch zoom
lightboxContent.addEventListener('touchstart', (e) => {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches[0], e.touches[1]);
}
});
lightboxContent.addEventListener('touchmove', (e) => {
if (e.touches.length === 2 && initialDistance) {
const currentDistance = getDistance(e.touches[0], e.touches[1]);
const deltaDistance = currentDistance - initialDistance;
const zoomFactor = deltaDistance > 0 ? touchScaleStep : -touchScaleStep;
scale = Math.max(scale + zoomFactor, 1); // Prevent scaling below 1
lightboxContent.style.transform = `scale(${scale})`;
initialDistance = currentDistance; // Update initialDistance for smoother zoom
}
});
lightboxContent.addEventListener('touchend', () => {
initialDistance = null; // Reset when touch ends
});
function getDistance(touch1, touch2) {
const dx = touch2.clientX - touch1.clientX;
const dy = touch2.clientY - touch1.clientY;
return Math.sqrt(dx * dx + dy * dy);
}
});
</script>
Viel Spaß beim Nachbau. Guckt auch dieses Tutorial von mir bezüglich Image-Zoom an.
Unten noch ein Screenshot vom "Code Editor" mit den eingebauten Skripten.
Skript im Code Editor