GoogleImagesEnlarger

By wagstaff — Last update Aug 28, 2007 — Installed 4,751 times.
// ==UserScript==
// @name          GoogleImagesEnlarger
// @description   Enlarges pictures when you roll over them
// @include       http://images.google.com/*
// @include       http://images.google.co.uk/*
// ==/UserScript==
//
// By: wagstaff
//
// Partly based on "Googlenlarge" (http://userscripts.org/scripts/show/7863)
// and partly on "Google Image Relinker with Mouseover"
// (http://userscripts.org/scripts/show/9524).


// Utility function to get the left position of an object
function getLeftPosn(object) {
   var leftPos = object.offsetLeft;

   while (object.offsetParent !== null) {
      object = object.offsetParent;
      leftPos += object.offsetLeft;
   }

   return leftPos;
}

// Function to tidy up in the event that we fail to load a big image.
function removeBigImage(event) {
   var bigImage, parentSpan;

   // Get objects.
   bigImage = event.currentTarget;
   parentSpan = bigImage.parentNode;

   // Remove the event listener.
   bigImage.removeEventListener('error', removeBigImage, false);

   // Remove big image and its parent span.
   parentSpan.removeChild(bigImage);
   parentSpan.parentNode.removeChild(parentSpan);
}

// Now we begin
const LEFT_RIGHT_MARGIN = 8;
const TOP_BOTTOM_MARGIN = 3;
const THUMBNAIL_BORDER = 1;
const SPAN_GAP = 10;
const SPAN_BORDER = 5;

var allLinks, thisLink;
var ii;
var regExpMatches, imageURI;
var newSpan, bigImage;
var href;
var windowWidth, maxWidth, maxHeight;
var newWidth, newHeight, ratio;
var littleImage, littleImageWidth;
var spaceLeft, spaceRight, neededSpace;

// add a style that we'll use for the spans that contain our big images.
// Initially they're hidden, but if you hover over the link they become visible.
GM_addStyle('a.thumbnail span {visibility:hidden; position:fixed; border:black; padding:3px 3px 3px 3px;background-color:#3B5998;};');
GM_addStyle('a.thumbnail:hover span {visibility:visible;};');
GM_addStyle('a.thumbnail img {border:2px solid white;};');

// Find links to images.
allLinks = document.evaluate('//A[contains(@href,"/imgres?imgurl=")][contains(@href,"&imgrefurl=")]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

// Walk through them.
for (ii = 0; ii < allLinks.snapshotLength; ii++) {
    // Get link, and put it in the thumbnail class.
    thisLink = allLinks.snapshotItem(ii);
    thisLink.className = 'thumbnail ' + thisLink.className;

    // Google helpfully store the image width and height for us - get them.
    href = thisLink.href;
    regExpMatches = href.match(/\&w\=(.*?)\&sz\=/);
    newWidth = parseInt(regExpMatches[1]);
    regExpMatches = href.match(/\&h=(.*?)\&w\=/);
    newHeight = parseInt(regExpMatches[1]);

    // Create a span to contain our big image.
    newSpan = document.createElement('SPAN');
    thisLink.appendChild(newSpan);

    // We will allow the big image to go to either the right or the left of the
    // little image, wherever there is more space.
    littleImage = thisLink.getElementsByTagName("IMG")[0];
    spaceLeft = getLeftPosn(littleImage) - LEFT_RIGHT_MARGIN;
    littleImageWidth = littleImage.width;
    windowWidth = document.body.clientWidth - 2*LEFT_RIGHT_MARGIN;
    spaceRight = windowWidth - (spaceLeft + littleImageWidth +
                                                           2*THUMBNAIL_BORDER);
    maxWidth = Math.max(spaceLeft, spaceRight) - (SPAN_GAP + 2*SPAN_BORDER);

    // And we'll allow almost the entire height of the window.
    maxHeight = document.body.clientHeight -
                                         (2*TOP_BOTTOM_MARGIN + 2*SPAN_BORDER);

    // Calculate the new image size.
    if (newWidth > maxWidth) {
        ratio = (maxWidth/newWidth);
        newWidth *= ratio;
        newHeight *= ratio;
    }
    if (newHeight > maxHeight) {
        ratio = (maxHeight/newHeight);
        newWidth *= ratio;
        newHeight *= ratio;
    }

    // Position our span:
    // - to the right of the little image, if there's room
    // - else to the left of the little image (where there must be room)
    neededSpace = newWidth + SPAN_GAP + 2*SPAN_BORDER;
    if (spaceRight >= neededSpace) {
       newSpan.style.right = (LEFT_RIGHT_MARGIN + spaceRight - neededSpace) + 'px';
    }
    else {
       newSpan.style.left = (LEFT_RIGHT_MARGIN + spaceLeft - neededSpace) + 'px';
    }

    // And position our image in the middle of the screen
    newSpan.style.bottom = ((maxHeight - newHeight)/2) + TOP_BOTTOM_MARGIN + 'px';

    // Figure out the source of the image.
    regExpMatches = href.match(/\/imgres\?imgurl\=(.*?)\&imgrefurl\=/);
    imageURI = decodeURI(regExpMatches[1]);

    // Finally insert the image into the document.
    bigImage = document.createElement('IMG');
    bigImage.width = newWidth;
    bigImage.height = newHeight;
    bigImage.src = imageURI;
    newSpan.appendChild(bigImage);

    // If the image fails to load, remove this whole construction.
    bigImage.addEventListener('error', removeBigImage, false);
}