Greasemonkey Hacks

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.

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