Create a fullscreen slideshow for Equestria Daily Drawfriend posts
// ==UserScript==
// @name Equestria Daily Slideshow
// @namespace http://tampermonkey.net/
// @version 0.1
// @license MPL v2.0
// @description Create a fullscreen slideshow for Equestria Daily Drawfriend posts
// @author Medo
// @match https://www.equestriadaily.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
if (!document.querySelector('.post-body img')) return;
GM_addStyle(`
.slideshow-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000000;
overflow: hidden;
}
.image-set {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
z-index: 10;
}
.image-set.hiddenses {
opacity: 0;
filter: blur(200px);
z-index: 11;
}
.image-layer {
position: absolute;
}
.image-layer img {
width: 100%;
height: 100%;
object-fit: contain;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 20;
}
.overlay-message {
color: white;
font-size: 2rem;
text-shadow: 2px 2px black;
white-space: nowrap;
}
`);
const images = Array.from(document.querySelectorAll('.post-body img'))
.map(img => img.src)
.filter(src => /\.(jpg|jpeg|png|gif)$/i.test(src));
let currentIndex = 0;
let slideshowContainer;
let previousImageSet, activeImageSet, nextImageSet;
function createSlideshow() {
slideshowContainer = document.createElement('div');
slideshowContainer.className = 'slideshow-container';
previousImageSet = createImageSet('image-set hiddenses');
activeImageSet = createImageSet('image-set');
nextImageSet = createImageSet('image-set hiddenses');
prepareSet(previousImageSet, images.length-1);
prepareSet(activeImageSet, 0);
prepareSet(nextImageSet, 1 % images.length);
slideshowContainer.appendChild(previousImageSet);
slideshowContainer.appendChild(activeImageSet);
slideshowContainer.appendChild(nextImageSet);
document.body.appendChild(slideshowContainer);
}
function createImageSet(classNames) {
var imageSet = document.createElement('div');
imageSet.className = classNames;
for (let i = 7; i >= -7; i-=2) {
createLayer(imageSet, Math.pow(1.7, i) / 20, Math.pow(2, i) / 30);
}
createLayer(imageSet, 0, 0);
// Add overlay for wrap-around message
const overlay = document.createElement('div');
overlay.className = 'overlay';
imageSet.appendChild(overlay);
return imageSet;
}
function createLayer(imageSet, blurscale, scale) {
const layer = document.createElement('div');
layer.className = 'image-layer';
layer.style.filter = `blur(calc(min(${blurscale * 50}vh, ${blurscale * 50}vw)))`;
layer.style.width = `${100 * scale + 100}vw`;
layer.style.height = `${100 * scale + 100}vh`;
const img = document.createElement('img');
layer.appendChild(img);
imageSet.appendChild(layer);
}
function switchImageSets(direction) {
activeImageSet.style.transition='opacity 0.7s, filter 0.7s ease-in';
activeImageSet.classList.add('hiddenses');
activeImageSet.style.zIndex=11;
if (direction === 'forward') {
[previousImageSet, activeImageSet, nextImageSet] = [activeImageSet, nextImageSet, previousImageSet];
const newIndex = (currentIndex + 1) % images.length;
prepareSet(nextImageSet, newIndex);
if (newIndex === 0) {
nextImageSet.querySelector('.overlay').style.display = 'flex';
nextImageSet.querySelector('.overlay').innerHTML = '<div class="overlay-message">This is the first image!</div>';
}
nextImageSet.style.zIndex=9;
} else {
[previousImageSet, activeImageSet, nextImageSet] = [nextImageSet, previousImageSet, activeImageSet];
prepareSet(previousImageSet, (currentIndex - 1 + images.length) % images.length);
previousImageSet.style.zIndex=9;
}
activeImageSet.style.transition='filter 0.7s ease';
activeImageSet.classList.remove('hiddenses');
activeImageSet.style.zIndex=10;
}
function prepareSet(imageSet, imageIndex) {
const layers = imageSet.querySelectorAll('.image-layer img');
layers.forEach((img) => {
img.src = images[imageIndex];
});
imageSet.querySelector('.overlay').style.display = 'none';
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
switchImageSets('forward');
}
function previousImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
switchImageSets('backwards');
}
function closeSlideshow() {
slideshowContainer.style.transition = 'opacity 0.5s';
slideshowContainer.style.opacity = '0';
document.querySelector("html").style.overflow="";
document.removeEventListener('keydown', handleKeydown);
setTimeout(() => {
document.body.removeChild(slideshowContainer);
}, 500);
}
function handleKeydown(event) {
if (event.key === 'ArrowRight') {
nextImage();
} else if (event.key === 'ArrowLeft') {
previousImage();
} else if (event.key === 'Escape') {
closeSlideshow();
}
}
function runScript() {
createSlideshow();
document.querySelector("html").style.overflow="hidden";
document.addEventListener('keydown', handleKeydown);
}
// Function to create and insert the button
function addButton() {
const button = document.createElement('button');
button.textContent = 'Slideshow';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '9999';
button.addEventListener('click', runScript);
document.body.appendChild(button);
}
// Add the button to the webpage
addButton();
})();