5

Inspired by a meta question, here's a script that makes every image in a post also open itself at full size in a new window/tab when clicked.

It will ignore any images already manually linked.

Please suggest any improvements, or better yet submit a pull request on GitHub.

The current version can be found at and installed from here.

// ==UserScript==
// @name          SEImageExpander
// @namespace     http://vulpin.com/
// @description   Let people click on images to view the full size
// @match         *://*.askubuntu.com/*
// @match         *://*.mathoverflow.net/*
// @match         *://*.onstartups.com/*
// @match         *://*.serverfault.com/*
// @match         *://*.stackapps.com/*
// @match         *://*.stackexchange.com/*
// @match         *://*.stackoverflow.com/*
// @match         *://*.superuser.com/*
// @version       1.0.4
// @grant         none
// ==/UserScript==

(function() {
var Program = {
    main: function() {
        window.removeEventListener('load', mainEventListener, false);

        var observer = new MutationObserver(function(mutations, observer) {
            // y'know what? MutationObserver sucks.
            // it doesn't give every modified node, just the top of a tree of modified nodes
            mutations.forEach(function(mutation) {
                Array.prototype.forEach.call(mutation.addedNodes, Program.processImgDescendants);
            });
        });

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

        Program.processImgDescendants(document);
    },

    processImgDescendants: function(node) {
        if (!node || !node.querySelectorAll) {
            return;
        }

        var imgNodes = node.querySelectorAll('.post-text img');

        Array.prototype.forEach.call(imgNodes, function(imgNode) {
            Program.processNode(imgNode);
        });
    },

    processNode: function(node) {
        if (node.tagName.toUpperCase() !== 'IMG') {
            return;
        }

        // walk up the tree until we reach the main post div, we don't care what's beyond that
        var parent = node;
        while (!parent.classList.contains('post-text')) {
            // if this image is already within a link, don't touch it
            if (parent.tagName.toUpperCase() === 'A') {
                return;
            }

            parent = parent.parentNode;

            // have we made it all the way to the top? we're not in a post!
            if (parent === null) {
                return;
            }
        }

        // ok, now we know the node is an unlinked image within a post
        var link = document.createElement('a');
        link.href = node.src;
        link.target = '_blank';
        node.parentNode.replaceChild(link, node);
        link.appendChild(node);
    }
};

var mainEventListener = Program.main.bind(Program);

window.addEventListener('load', mainEventListener, false);
})();
1
  • This is excellent, thank you...works perfect in Firefox with Greasemonkey. Commented Oct 17, 2014 at 19:29

0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.