fixes side scroll snapping to the current picture and adds a gallery view toggle
Per
// ==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 });
})();