How to build a “magnifying glass” animation with jQuery

How to
Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestShare on LinkedInEmail this to someone

Last fall, The New Yorker published a short piece by Rebecca Solnit that features a map modeled after New York City’s subway map that pays homage to the city’s women. Designed by Molly Roy and included in Solnit’s book “Nonstop Metropolis,” the map was published on the NewYorker.com with a “magnifying glass” animation.

The following tutorial explains how to achieve a similar animation with a simple jQuery script from Tom Doan called Magnify.js.

Download Magnify.js and open in a text editor

From Doan’s webpage, download the .zip file of the Magnify.js directory.

Open Magnify.js in a text editor. We like Sublime Text. Notice there are directories for the associated CSS and JS files. You can delete all the “demo” files.

Build a new page to house your map

For the purposes of the tutorial, we will use a regular New York City subway map image, found on Wikipedia here, though any image will do. Open a new html file in your text editor and insert some standard HTML tags.

In the <head> tag, call the magnify.css file, the jquery.magnify.js file and the jQuery library:

In the <body> tag, insert this image element linking to the map: with smaller dimensions in src= and larger dimensions in data-magnify-src=.

Note: Make sure the aspect ratio for the two images is the same. (I did this by reducing my larger image in Preview under Tools -> Adjust Size… and changing only the image’s width).

Next, add the jQuery script in the <body>.

Save the html file as magnify.html or something. It should look like this:

Upload the files via FTP

Using a program like FileZilla or Fetch, upload the directory to your server.

Open your magnify.html file

Voilá. You should have a working animation. We’ll embed this magnify.html in an iframe – which is in essence a page within a page – so we can include it with an article in our CMS (which is WordPress).

Storybench’s editor is Aleszu Bajak, a science journalist and former Knight Science Journalism Fellow at MIT. He is an alum of Science Friday, the founder of LatinAmericanScience.org, and is passionate about breaking down the divide between journalists, developers and designers.

Leave a Reply