Mobirise-Tutorials.com

Code: Alles auswählen

<meta name="keywords" content="HTML, CSS, JavaScript, Mobirise">

Code: Alles auswählen

  <!-- 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.01;  // Slow down the 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>

Code: Alles auswählen

<script>

document.addEventListener('DOMContentLoaded', function() {
    const lightbox = document.getElementById('lightbox');
    const lightboxImage = document.getElementById('lightbox-image');
    const closeLightbox = document.getElementById('close-lightbox');
    const triggerImage = document.getElementById('trigger-image');

    let scale = 1;
    let isDragging = false;
    let startX, startY, lastX = 0, lastY = 0;
    let initialDistance = null;
    let initialScale = 1;

    // Öffnen der Lightbox
    triggerImage.addEventListener('click', function() {
        lightbox.classList.add('open');
        scale = 1;
        lightboxImage.style.transform = `translate(0px, 0px) scale(${scale})`;
    });

    // Schließen der Lightbox
    closeLightbox.addEventListener('click', function() {
        lightbox.classList.remove('open');
    });

    // Zoom-Funktion mit dem Mausrad (Desktop)
    lightboxImage.addEventListener('wheel', function(event) {
        event.preventDefault();
        const delta = Math.sign(event.deltaY) * -0.1;
        scale += delta;
        scale = Math.min(Math.max(0.5, scale), 10); // Erhöhung des max. Zooms auf 200%
        lightboxImage.style.transform = `translate(${lastX}px, ${lastY}px) scale(${scale})`;
    });

    // Start des Dragging
    lightboxImage.addEventListener('mousedown', startDragging);
    lightboxImage.addEventListener('touchstart', startDragging);

    // Dragging fortsetzen
    lightbox.addEventListener('mousemove', drag);
    lightbox.addEventListener('touchmove', drag);

    // Beenden des Dragging
    lightbox.addEventListener('mouseup', stopDragging);
    lightbox.addEventListener('mouseleave', stopDragging);
    lightbox.addEventListener('touchend', stopDragging);
    lightbox.addEventListener('touchcancel', stopDragging);

    function startDragging(event) {
        event.preventDefault();

        if (event.type === 'touchstart' && event.touches.length === 2) {
            initialDistance = getDistance(event.touches[0], event.touches[1]);
            initialScale = scale;
            return;
        }

        isDragging = true;
        startX = (event.type === 'touchstart' ? event.touches[0].clientX : event.clientX) - lastX;
        startY = (event.type === 'touchstart' ? event.touches[0].clientY : event.clientY) - lastY;
        lightboxImage.classList.add('dragging');
    }

    function drag(event) {
        if (event.type === 'touchmove' && event.touches.length === 2) {
            const newDistance = getDistance(event.touches[0], event.touches[1]);
            const distanceDelta = newDistance - initialDistance;
            const zoomDelta = distanceDelta * 0.01;
            scale = Math.min(Math.max(0.5, initialScale + zoomDelta), 10); // Erhöhung des max. Zooms auf 200%
            lightboxImage.style.transform = `translate(${lastX}px, ${lastY}px) scale(${scale})`;
            return;
        }

        if (!isDragging) return;

        event.preventDefault();
        const x = (event.type === 'touchmove' ? event.touches[0].clientX : event.clientX) - startX;
        const y = (event.type === 'touchmove' ? event.touches[0].clientY : event.clientY) - startY;
        lastX = x;
        lastY = y;
        lightboxImage.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
    }

    function stopDragging() {
        isDragging = false;
        lightboxImage.classList.remove('dragging');
        initialDistance = null;
    }

    function getDistance(touch1, touch2) {
        return Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
    }
});

</script>

Code: Alles auswählen

<script>
  const darkenButton = document.querySelector('.darken-button');
  const section = darkenButton.closest('section');

  darkenButton.addEventListener('click', function(event) {
    event.preventDefault();
    section.style.backgroundColor = '#000';
    section.style.opacity = '0.5';
  });
</script>

Code: Alles auswählen

<div class="card">
    <img src="https://images.unsplash.com/photo-1573843981267-be1999ff37cd?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8MXx8TWFsZGl2ZXN8ZW58MHwwfHx8MTc1Mjg5NjMzMnww&ixlib=rb-4.1.0&auto=format&fit=crop&w=1200&q=80" class="card-img-top" alt="Maldives">
    <div class="card-body">
        <p class="card-text mbr-fonts-style" mbr-theme-style="display-7">Die strahlend weißen Sandstrände, das türkisfarbene Wasser und die üppige tropische Vegetation machen die Malediven zu einem wahren Paradies.</p>
    </div>
</div>