Tutorial #29
Image Magnifying Glass Intermediate   2013-12-05

Introduction

If you want to display large detailed images on a web page you face the dilemma of shrinking the size of the image to fit the page, or showing it at its full size and then requiring the user to resize their browser or scroll to see it all.

One solution is to show the smaller image as an overview and provide a Magnifying Glass that shows a small portion of the full size image. As the user moves their mouse, the magnifying glass moves with it and the magnified region tracks the movement across the overview. The result is something like this:

Demo 1 screenshot for this tutorial

There are several ways to implement this but the simplest approach uses a large, high resolution version of the image. A smaller version of this is shown as the overview and, depending on where the mouse is located on the overview, a small segment of the large image is shown in the overlaid 'magnifying glass'.

This tutorial shows a nice implementation of this approach. It is derived from this tutorial from TheCodePlayer.


Understanding the Code

The code uses the jQuery library so you need to include this in your page.

The code consists of four components:
1: The image - this is the full size version.
2: HTML divs
3: style directives
4: JavaScript code.

The HTML consists of a div with an id of container. Using an id here allows for multiple images with magnifiers on the same page, although the JavaScript would need modification.

Within this div a div with class magnifier which is initially empty. This is going to be the magnifying glass that shows a small portion of the full size image. Note that this is a div and not a img. We are going to load the full size image as the background to the div and then 'move' the magnifier over this image as needed.

The second element is an img that uses the full size image as its src but which display it with a smaller width, this this case 600px. This is the small image that the user sees on the web page.


The style block sets up the #container div in the center of the page with the width of the small image.

The .magnifier is set up as a 200x200 pixel square which is hidden when the page loads. The border-radius is set to 100% which is a simple and very clever way to round the four corners of the square so much that the square appears to be a circle. If you were to set this value to 0% you would get a square, which might be more appropriate in some cases. Values between the two extremes give a square with rounded corners.

Image 1 for this tutorial

The box-shadow creates a nice border around the magnifier with subtle shadows.


The JavaScript runs once the page has loaded within the jQuery $(document).ready block. Getting the width and height of the full size image is a little tricky and so the code creates an Image object with the src set to that of the small image tag, which is the full size image. There is probably a better way to get this info, or you could specify the size as a static variable.

The next statement sets the CSS background of the magnifier div to the full size image.

Next we create an Event Handler on the container which is triggered whenever the mouse is moved within that div. The first time that happens we get the current width and height of the full size image. Every other time we get the location of the mouse, draw the magnifying glass centered on that location and update that div so that it shows that portion of the full size image.

Remember that we set the full size image as the background to the magnifier. We move the small magnifier window across that large background to show the portion that corresponds to the current mouse location.

To do that we first calculate the position of the mouse relative to the container. If the mouse has moved out of, or in to, the container we fade the magnifying glass out or in accordingly, such that it only appears when the mouse is over the small image.

When it is within the container, and hence visible we compute the coordinates of the magnifer relative to the mouse position and then we compute the coordinates of the large image segment that corresponds to where the mouse is on the small image. This gives us a backgroundPosition that we use to update the css properties of the magnifier, resulting in the correct portion of the image being displayed.

Overall the code is fairly straightforward. The trick with this sort of calculation is to make sure the coordinates in the small and large images match up.

In this demo the original, full size image is 2800x2800 pixels and the smaller version is shown at 600x600. In your application you may want to experiment with the relative difference between the two sizes, and the size of the magnifier so as to show your intended detail at the correct size.

The image used in the Demo was taken by the NASA Cassini spacecraft and shows Herschel Crater on Mimas, a moon of Saturn


Code for this Tutorial


Share this tutorial


Related Tutorials

34 : Image Thumbnails and Lightboxes   (Intermediate)

39 : Fullscreen API   (Intermediate)


Comment on this Tutorial


comments powered by Disqus