☰

Greasy Fork is available in English.

Reddit View Full Image on Click

Open images in posts on container

// ==UserScript==
// @name            Reddit View Full Image on Click
// @namespace       https://greasyfork.org/users/821661
// @match           https://www.reddit.com/*
// @match           https://new.reddit.com/*
// @grant           GM_addElement
// @grant           GM_addStyle
// @run-at          document-end
// @version         1.2.1
// @author          hdyzen
// @description     Open images in posts on container
// @license         MIT
// @noframes
// ==/UserScript==
'use strict';

// Container with image
const container = GM_addElement(document.body, 'div', {
    'id': 'image-container',
});

// Image for source
const img = GM_addElement(container, 'img', {
    'id': 'imageView',
    'src': '',
});

const video = GM_addElement(container, 'video', {
    'id': 'videoView',
    'src': '',
    'controls': '',
});

// Get id image
function getIdImage(url) {
    const idImage = url.match(/https:\/\/.*\/(.*)\?/);
    return idImage ? `https://i.redd.it/${idImage[1]}` : url;
}

// Handler click on image/link
function handlerClickImage(e) {
    const target = e.target;
    if (!target.matches('img.ImageBox-image[src^="https://preview.redd.it"], img._1dwExqTGJH2jnA-MYGkEL-[src], a._1PlxnYkerei9iGJsL9JyrP:is([href^="https://preview.redd.it/"], [href^="https://i.redd.it"]), a.styled-outbound-link[href$=".gifv"]')) return;
    e.preventDefault();
    e.stopImmediatePropagation();
    if (target.nodeName === 'IMG') {
        img.src = getIdImage(target.src);
    } else if (target.nodeName === 'A' && target.href.includes('redd.it')) {
        console.log(e.target.href);
        img.src = getIdImage(target.href);
    } else {
        video.src = target.href.replace('.gifv', '.mp4');
    }
}

// Hide container when click in container
container.addEventListener('click', e => {
    if (e.target !== container) return;
    img.src = '';
    video.src = '';
});

// Hide container when press space
document.addEventListener('keyup', e => {
    if (img.src !== '' && e.key === 'Escape') {
        img.src = '';
    }
});

// Copy image src to clipboard
img.addEventListener('click', e => navigator.clipboard.writeText(img.src));

// Show image when click in image
document.addEventListener('click', handlerClickImage);

// Style
GM_addStyle(`
#image-container {
    /* Hide container by default, center image, show over other elements */
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    /* Do not exceed parent element  */
    & img#imageView, video#videoView {
        max-height: 95%;
        max-width: 95%;
        display: none;
    }
    /* Show container when image contain src */
    &:has(img#imageView[src^="https://i.redd.it"]) {
        display: flex;
        & #imageView {
            box-shadow: 0 0 15px 6px rgba(0, 0, 0, .3);  
            display: unset;
        }
    }
    /* Show container when video contain src */
    &:has(video#videoView[src$=".mp4"]) {
        display: flex;
        & #videoView {
            box-shadow: 0 0 15px 6px rgba(0, 0, 0, .3);  
            display: unset;
        }
    }
}
/* Not scroll page when container opened */
body:has(img#imageView:is([src^="https://i.redd.it"], video#videoView[src$=".gifv"])) {
    overflow: hidden;
}
`);