☰

scenenzbs Thumb-Hoverblock + Overlay + Zoomfaktor + Placeholder-Filter

Kein Thumb-Zoom, kein Hover, Overlay nur für echte Cover (keine Platzhalter/category_* Bilder), Zoomfaktor oben einstellbar

À partir de 2025-07-03. Voir la dernière version.

// ==UserScript==
// @name         scenenzbs Thumb-Hoverblock + Overlay + Zoomfaktor + Placeholder-Filter
// @namespace    https://scenenzbs.com/
// @version      4.4
// @description  Kein Thumb-Zoom, kein Hover, Overlay nur für echte Cover (keine Platzhalter/category_* Bilder), Zoomfaktor oben einstellbar
// @author       ChatGPT
// @match        https://scenenzbs.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // === HIER EINSTELLEN ===
    // ZOOMFACTOR = 1.0 => 340x480px (Standard), 1.5 => 510x720px, 2.0 => 680x960px etc.
    const ZOOMFACTOR = 2.5;
    const BASE_WIDTH = 340;
    const BASE_HEIGHT = 480;
    const overlayWidth = Math.round(BASE_WIDTH * ZOOMFACTOR) + 'px';
    const overlayHeight = Math.round(BASE_HEIGHT * ZOOMFACTOR) + 'px';

    // Platzhalter-Pattern (hier: "category_" oder "placeholder.webp")
    function isPlaceholder(img) {
        const src = (img.getAttribute('src') || '').toLowerCase();
        return src.includes('category_') || src.includes('placeholder.webp');
    }

    // Thumb-Hover-Styles 100% killen
    function killThumbZoomHover() {
        document.querySelectorAll('img.thumb-zoom').forEach(img => {
            img.style.transform = 'none';
            img.style.transition = 'none';
            img.style.zIndex = 'auto';
            img.style.position = 'static';
        });
        if(!window.__hoverblockCSS) {
            let s = document.createElement('style');
            s.innerHTML = `
            img.thumb-zoom:hover,
            .thumb-zoom-wrap:hover img.thumb-zoom,
            img.thumb-zoom:active,
            img.thumb-zoom:focus {
                transform: none !important;
                transition: none !important;
                z-index: auto !important;
                position: static !important;
                outline: none !important;
                filter: none !important;
                box-shadow: none !important;
            }
            `;
            document.head.appendChild(s);
            window.__hoverblockCSS = true;
        }
    }

    // Overlay-Bild
    if(!window.__overlayImg) {
        let overlayImg = document.createElement('img');
        overlayImg.className = 'ultra-overlay-img';
        Object.assign(overlayImg.style, {
            position: 'fixed', left: '50%', top: '50%',
            width: overlayWidth, height: overlayHeight,
            maxWidth: '95vw', maxHeight: '95vh', transform: 'translate(-50%,-50%)',
            zIndex: 99999, borderRadius: '14px', boxShadow: '0 8px 40px 0 rgba(0,0,0,0.8)',
            background: '#191919', opacity: 0, pointerEvents: 'none', display: 'block', objectFit: 'contain',
            transition: 'opacity 0.18s cubic-bezier(.19,1,.22,1)'
        });
        document.body.appendChild(overlayImg);
        window.__overlayImg = overlayImg;
    } else {
        window.__overlayImg.style.width = overlayWidth;
        window.__overlayImg.style.height = overlayHeight;
    }

    function bindOverlay() {
        document.querySelectorAll('img.thumb-zoom').forEach(img => {
            if(img.dataset.ultraBound) return;
            img.dataset.ultraBound = '1';

            img.addEventListener('mouseenter', () => {
                if (isPlaceholder(img)) {
                    window.__overlayImg.style.opacity = 0;
                    return;
                }
                window.__overlayImg.src = img.src;
                window.__overlayImg.style.opacity = 1;
            });
            img.addEventListener('mouseleave', () => {
                window.__overlayImg.style.opacity = 0;
            });
        });
    }

    killThumbZoomHover();
    bindOverlay();

    const observer = new MutationObserver(() => {
        killThumbZoomHover();
        bindOverlay();
        window.__overlayImg.style.width = overlayWidth;
        window.__overlayImg.style.height = overlayHeight;
    });
    observer.observe(document.body, {childList:true,subtree:true});
})();