How to Make Amazon Product Images Larger with User Scripts

Make Amazon Product Images Larger

Amazon lets you see larger product images in a separate window. Display them inline instead.

Amazon product pages contain a wealth of information, including a medium-sized image of the product. Clicking on the product image opens a new window to display a larger version. This is fine for most screens, but if you're lucky enough to be using a modern laptop or a high-resolution monitor, you have plenty of real estate on your screen to display the larger product image inline on the product page itself.

The Code

This user script will run on all Amazon pages. The code itself is divided into three parts:

Find the product image: If you're looking at a non-product page, or a product for which Amazon doesn't have an image, the script will exit without modifying anything.
Reset hardcoded widths: Amazon wraps the product image inside a <div> that hardcodes the image width. We need to reset that width so the larger image will display properly.
Replace the product image: This is a simple matter of creating a new <img> element that points to the larger version of the product image, and then replacing the existing <img> element.

Save the following user script as amazonlarger.user.js:

 // ==UserScript==
 // @name   Amazon Larger  Images
 // @namespace http://diveintomark.org/projects/greasemonkey/
 // @description display larger product images on Amazon
 // @include  http://amazon.tld/*
 // @include  http://*.amazon.tld/*
 // ==/UserScript==
 var elmProductImage = document.evaluate(
  "//img[contains(@src, 'MZZZZZZZ')]", document, null,
  XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 if (!elmProductImage) return;
 var elmParent = elmProductImage.parentNode;
 while (elmParent && (elmParent.nodeName != 'BODY')) {
     elmParent.style.width = 'auto';
     elmParent.style.height = 'auto';
     elmParent = elmParent.parentNode;
    }
 var elmNewImage = document.createElement('img');
 elmNewImage.src = elmProductImage.src.replace(/MZZZZZZZ/, 'LZZZZZZZ');
 elmNewImage.style.border = '0';
 elmProductImage.parentNode.replaceChild(elmNewImage, elmProductImage);

Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.amazon.com and search for anything-for example, Dave Matthews Band Stand Up. When you click through to the product page, you will see the larger version of the album cover, as shown in Figure 3-10.

Hacking the Hack

If you don't want to see the product images at all, you can simplify the script immensely:

 var elmProductImage = document.evaluate(
    "//img[contains(@src, 'MZZZZZZZ')]", document, null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (!elmProductImage) return;
 elmProductImage.parentNode.removeChild(elmProductImage);