Greasemonkey Hacks

Hack #73. Add a Toolbar to Zoom Images Easily

Reduce or enlarge individual images with a single click.

In Firefox, you can make any page text larger by pressing Ctrl-equals sign (=), or make it smaller by pressing Ctrl-hyphen (-).However, this does nothing to the images on the page. If you want to enlarge or reduce an image, you're out of luck.

Here's a cool little hack that adds a toolbar to each image on a page to make it larger or smaller.

The Code

This user script runs on all pages. It finds all the images on the page with the document.images collection, and then adds a toolbar of buttons (really, just a <div> with some <a> elements styled to look like buttons). Before you protest, I realize that this script isn't keyboard-accessible. You can't win them all.

Save the following user script as zoom-image.user.js:

	// ==UserScript==
	// @name Zoom Image

	// @namespace http://www.smartmenus.org/
	// @description Displays an zoom toolbar over images // ==/UserScript== // based on code by Vasil Dinkov // and included here with his gracious permission // === User Configuration === const kZoomFactor = 1.7; // amount to zoom image on each click const kMenuShowTimeOut = 1.2; // seconds before auto-hiding menu const kMinimumImageWidth = 100; // minimal width of the menu-enabled images const kMinimumImageHeight = 50; // minimal height of the menu-enabled images // === Code === var gTimeoutID = gPixelLeft = gPixelTop = 0; var gMenuBuilt = false; var gElmToolbar = gCurrentImage = null; function ...