lightbox.js - master - ncit/studiosite

lightbox.js
65 строк4 KB
ncit
SEO optimization: meta tags, service pages, case studies, analytics
10 мар 2026, 18:46
10 мар 2026, 18:4653fa5d5
(function() {
    // Create modal
    var modal = document.createElement('div');
    modal.id = 'lightbox';
    modal.style.cssText = 'display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.95);backdrop-filter:blur(8px);cursor:zoom-out;';
    modal.innerHTML = '<div style="position:absolute;top:0;right:0;left:0;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;z-index:10"><span id="lb-counter" style="color:rgba(255,255,255,0.5);font-size:14px;font-family:sans-serif"></span><button id="lb-close" style="width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center">✕</button></div><button id="lb-prev" style="position:absolute;left:16px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:24px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center">‹</button><img id="lb-img" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:92%;max-height:88%;object-fit:contain;border-radius:12px;transition:opacity 0.2s" src="" alt=""><button id="lb-next" style="position:absolute;right:16px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:24px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center">›</button>';
    document.body.appendChild(modal);

    var imgs = [];
    var idx = 0;

    // Collect all case screenshot images
    document.querySelectorAll('.case-screenshot').forEach(function(img, i) {
        imgs.push(img.src);
        img.style.cursor = 'zoom-in';
        img.addEventListener('click', function() { open(i); });
    });

    function open(i) {
        idx = i;
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden';
        show();
    }

    function close() {
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }

    function show() {
        var img = document.getElementById('lb-img');
        img.style.opacity = '0';
        setTimeout(function() {
            img.src = imgs[idx];
            img.style.opacity = '1';
        }, 100);
        document.getElementById('lb-counter').textContent = (idx + 1) + ' / ' + imgs.length;
        document.getElementById('lb-prev').style.display = imgs.length > 1 ? 'flex' : 'none';
        document.getElementById('lb-next').style.display = imgs.length > 1 ? 'flex' : 'none';
    }

    function next() { idx = (idx + 1) % imgs.length; show(); }
    function prev() { idx = (idx - 1 + imgs.length) % imgs.length; show(); }

    document.getElementById('lb-close').addEventListener('click', close);
    document.getElementById('lb-prev').addEventListener('click', function(e) { e.stopPropagation(); prev(); });
    document.getElementById('lb-next').addEventListener('click', function(e) { e.stopPropagation(); next(); });
    modal.addEventListener('click', function(e) { if (e.target === modal) close(); });

    document.addEventListener('keydown', function(e) {
        if (modal.style.display === 'none') return;
        if (e.key === 'Escape') close();
        if (e.key === 'ArrowRight') next();
        if (e.key === 'ArrowLeft') prev();
    });

    // Touch swipe
    var tx = 0;
    modal.addEventListener('touchstart', function(e) { tx = e.touches[0].clientX; }, { passive: true });
    modal.addEventListener('touchend', function(e) {
        var d = e.changedTouches[0].clientX - tx;
        if (Math.abs(d) > 50) { d < 0 ? next() : prev(); }
    }, { passive: true });
})();