☰

WhoresHub Fullwidth Scroll/Grid Gallery

fixes side scroll snapping to the current picture and adds a gallery view toggle

Per 06-09-2025. Zie de nieuwste versie.

// ==UserScript==
// @name         WhoresHub Fullwidth Scroll/Grid Gallery
// @namespace    Violentmonkey Scripts
// @match        https://www.whoreshub.com/albums/*
// @version      1.0
// @author       Nimby345
// @description fixes side scroll snapping to the current picture and adds a gallery view toggle
// @grant        none
// @license MIT

// ==/UserScript==

(function() {
    'use strict';

    function enableGalleryToggle() {
        // --- Inject full-width CSS ---
        const style = document.createElement('style');
        style.textContent = `
            .container { max-width: 100% !important; padding: 0 !important; }
            .gallery-top, .gallery-thumbs { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
            .swiper-wrapper { width: 100% !important; }
            .swiper-slide img { width: 100% !important; object-fit: contain; }
        `;
        document.head.appendChild(style);

        // --- Gallery Toggle Logic ---
        const galleryThumbs = document.querySelector('.gallery-thumbs');
        const thumbsWrapper = galleryThumbs?.querySelector('.swiper-wrapper');
        if (!galleryThumbs || !thumbsWrapper) return;

        // Prevent duplicate toggles
        if (document.querySelector('#galleryToggleBtn')) return;

        // Create a toggle button
        const toggleBtn = document.createElement('button');
        toggleBtn.id = 'galleryToggleBtn';
        toggleBtn.textContent = 'Toggle Grid View';
        toggleBtn.style.position = 'fixed';
        toggleBtn.style.top = '10px';
        toggleBtn.style.right = '10px';
        toggleBtn.style.zIndex = 9999;
        toggleBtn.style.padding = '6px 12px';
        toggleBtn.style.background = '#000';
        toggleBtn.style.color = '#fff';
        toggleBtn.style.border = 'none';
        toggleBtn.style.cursor = 'pointer';
        document.body.appendChild(toggleBtn);

        let isGrid = false;

        toggleBtn.addEventListener('click', () => {
            isGrid = !isGrid;

            if (isGrid) {
                // Grid view
                thumbsWrapper.style.display = 'grid';
                thumbsWrapper.style.gridTemplateColumns = 'repeat(auto-fill, minmax(150px, 1fr))';
                thumbsWrapper.style.gridGap = '5px';
                thumbsWrapper.style.padding = '5px 5px';  // 5px left/right
                thumbsWrapper.style.boxSizing = 'border-box';
                thumbsWrapper.style.transform = 'none !important'; // stop snapping

                thumbsWrapper.querySelectorAll('.swiper-slide').forEach(slide => {
                    slide.style.width = '100%';       // slide wrapper fix
                    slide.style.marginRight = '5px';  // ensure right-side spacing
                });


              // Disable Swiper auto-scroll while in grid
              if (galleryThumbs.swiper) {
                 galleryThumbs.swiper.allowSlideNext = false;
                 galleryThumbs.swiper.allowSlidePrev = false;
        }
            } else {
                // Restore side-scroll
                thumbsWrapper.style.display = '';
                thumbsWrapper.style.gridTemplateColumns = '';
                thumbsWrapper.style.gridGap = '';
                thumbsWrapper.style.padding = '';
                thumbsWrapper.style.boxSizing = '';
                thumbsWrapper.style.transform = '';
                thumbsWrapper.querySelectorAll('.swiper-slide').forEach(slide => {
                    slide.style.width = '';
                    slide.style.marginRight = '';
                });

                // Re-enable free scrolling without snapping
                if (galleryThumbs.swiper) {
                    galleryThumbs.swiper.params.freeMode = true;
                    galleryThumbs.swiper.update();
                }
            }
        });
    }

    // --- Wait for gallery to load using MutationObserver ---
    const observer = new MutationObserver(() => {
        if (document.querySelector('.gallery-thumbs .swiper-slide img')) {
            enableGalleryToggle();
            observer.disconnect();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

})();