O'Reilly logo

Greasemonkey Hacks by Mark Pilgrim

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required