How to build a “magnifying glass” animation with jQuery
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).
