Load gallery images on nookies.com by replacing thumbnail URLs with full‑size ones and displaying them in a responsive grid that uses the full available width, with 4 images per row.
As of
// ==UserScript==
// @name Nookies view all images on one page
// @namespace http://tampermonkey.net/
// @version 0.25
// @description Load gallery images on nookies.com by replacing thumbnail URLs with full‑size ones and displaying them in a responsive grid that uses the full available width, with 4 images per row.
// @match https://www.nookies.com/membersarea/gallery/*
// @grant none
// @license GPL-3.0
// ==/UserScript==
(function() {
'use strict';
// Inject custom CSS that overrides the container width and sets up a full‑width responsive flex grid.
const style = document.createElement('style');
style.innerHTML = `
/* Override the container in the page content to use full width */
.page-content .container {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Use flexbox to create a responsive grid that uses the full width */
.flexy-gallery {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: center;
padding: 10px;
}
/* Each gallery item will take roughly 25% of the width (4 per row).
Adjust "calc(25% - 20px)" if you need a different number of images per row.
The "-20px" subtracts for the horizontal gaps. */
.flexy-gallery .gallery-item {
flex: 1 1 calc(25% - 20px) !important;
max-width: calc(25% - 20px) !important;
box-sizing: border-box;
}
/* Ensure images fill their container */
.flexy-gallery .gallery-item img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* Fixed load button styling */
#nookiesLoadButton {
position: fixed !important;
top: 10px !important;
right: 10px !important;
z-index: 100000 !important;
padding: 10px !important;
background-color: #007bff !important;
color: #fff !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
}
`;
document.head.appendChild(style);
// Add the load button once the page has loaded.
if (document.readyState === 'complete') {
addLoadButton();
} else {
window.addEventListener('load', addLoadButton);
}
function logDebug(msg) {
console.log("[NookiesGalleryAutoLoader] " + msg);
}
// Update a gallery item's image: remove restrictions and swap the thumbnail URL for the full‑size URL.
function updateGalleryImage(item) {
const img = item.querySelector('img');
if (img) {
img.classList.remove('img-fluid');
img.removeAttribute('width');
img.removeAttribute('height');
img.removeAttribute('srcset');
if (img.src.includes('/thumbs/')) {
const oldSrc = img.src;
img.src = img.src.replace('/thumbs/', '/');
logDebug("Replaced image URL: from " + oldSrc + " to " + img.src);
}
// Let the image fill its container.
img.style.width = "100%";
img.style.height = "auto";
}
}
// Determine the total number of pages from the pagination.
function getTotalPages() {
let maxPage = 1;
const pages = document.querySelectorAll('ul.pagination li.page-item');
pages.forEach(li => {
const num = parseInt(li.textContent.trim(), 10);
if (!isNaN(num) && num > maxPage) {
maxPage = num;
}
});
logDebug("Total pages: " + maxPage);
return maxPage;
}
// Fetch the HTML content of a gallery page.
async function fetchGalleryPage(url) {
try {
logDebug("Fetching gallery page: " + url);
const res = await fetch(url, { credentials: 'same-origin' });
if (!res.ok) {
logDebug("Error fetching " + url + ": " + res.status);
return null;
}
const html = await res.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const container = doc.querySelector('.flexy-gallery');
if (!container) {
logDebug("No gallery container found on " + url);
return null;
}
return container.innerHTML;
} catch (e) {
logDebug("Fetch error: " + e);
return null;
}
}
// Load all additional gallery pages.
async function loadAllGalleryPages() {
const totalPages = getTotalPages();
if (totalPages <= 1) {
logDebug("Only one page available.");
return;
}
const gallery = document.querySelector('.flexy-gallery');
if (!gallery) {
logDebug("No gallery container found.");
return;
}
const loader = document.createElement('div');
loader.style.textAlign = "center";
loader.style.padding = "10px";
loader.textContent = "Loading all images...";
gallery.parentNode.insertBefore(loader, gallery.nextSibling);
const baseUrl = window.location.href.split('?')[0];
for (let page = 2; page <= totalPages; page++) {
const pageUrl = `${baseUrl}?page=${page}`;
const content = await fetchGalleryPage(pageUrl);
if (content) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
const items = tempDiv.querySelectorAll('.gallery-item');
items.forEach(item => {
updateGalleryImage(item);
gallery.appendChild(item);
});
logDebug("Appended " + items.length + " items from page " + page);
}
}
loader.textContent = "All images loaded.";
document.querySelectorAll('ul.pagination').forEach(el => el.remove());
}
// Add a floating load button.
function addLoadButton() {
const oldBtn = document.getElementById('nookiesLoadButton');
if (oldBtn) {
oldBtn.remove();
}
const btn = document.createElement('button');
btn.id = 'nookiesLoadButton';
btn.textContent = 'Load All Images';
btn.addEventListener('click', () => {
btn.disabled = true;
logDebug("Load button clicked.");
loadAllGalleryPages();
});
document.body.appendChild(btn);
logDebug("Load button added.");
}
})();