Zoom and Other Controls


You might have noticed in the previous example we slipped in a meta viewport tag to make sure that our example looks better on mobile devices. If you've never done this before then you can read all about the viewport tag here.

One feature of the viewport tag that's of special interest to us is that you can set the maximum scale of a page e.g. like this:

    <meta name = "viewport" content="width=device-width, maximum-scale=10.0"/>

If you don't set it then the default value is 5.0. The maximum allowed value is 10.0

This meta tag was originally defined by Apple for their Safari IOS browsers. Support on other mobile browsers varies but is mostly good with new browsers.

That's fine for mobile users if you're OK with them zooming the entire page but it's a little limiting. If you don't want to make the whole page scalable or if 10.0 isn't enough then you need to enable the pinch zoom function of the image. For our desktop/laptop users who don't have pinch zoom you'll probably also want to enable the pointer zoom function. Here's the code to enable both types of zoom:

    var nlImage = nextlook.loadImage("101.252.0.1cc0.1330", "IMAGE_GOES_HERE");
    nlImage.enablePinchZoom();
    nlImage.enablePointerZoom();

Now you can see that the nextlook.loadImage() function returns an image object. Instead of just ignoring it, as we did in the first example, we can call member functions of that object to add some functionality to the image.

The enablePinchZoom() function makes the image scalable on browsers that support touch controls. This is an alternative to making the entire page scalable although in some cases you might want to do both.

The enablePointerZoom() adds zoom controls on browsers that do not have touch controls.

So what are the other member functions that we can use on an image object ? Let's look at two of them:

    nlImage.addAlbumNavigation();
    // This adds controls to the image to enable the user to navigate to the other images
    // in the album.

    nlImage.addScaleDisplay();
    // Mainly for testing purposes but some users may find this interesting.

And again, here's the complete HTML page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zoom and other Controls</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<script type="text/javascript" src="http://core.nextlook.com/nl.js"></script>
</head>
<body>
<div id="NL_IMAGE_HERE" style="position:absolute;left:5%;top:5%;width:90%;height:90%;">
</div>
<script type="text/javascript">
    var nlImage = nextlook.loadImage("101.252.0.1cc0.1330", "NL_IMAGE_HERE");
    nlImage.enablePinchZoom();
    nlImage.enablePointerZoom();
    nlImage.addAlbumNavigation();
    nlImage.addScaleDisplay();
</script>
</body>
</html>

And in a web browser, it looks like this.

If you try this one on a mobile device, you'll see that it looks different than it does on a desktop but the functionality is basically the same.

Up until now we've been displaying images at essentially full screen. Now lets look at some other Layout Options