Hack 25. 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.

3.6.1. 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); 

3.6.2. 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.

3.6.3. 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); 

Figure 3-10. Amazon.com page with larger product image