NextLook Static Image Tutorial


Including NextLook images in your own HTML pages is fairly straightforward. There are just a few things that you need to know.

This tutorial is organized as a series of examples each of which shows you how to use some new functionality. You don't necessarily need to go through these in order but we would recommend that you understand the first three before looking at anything else.

Let's start with the simplest possible example: A full page image with no bells and whistles.

The first thing you need is to include this javascript file. Usually you'll put this somewhere inside the <head> section of your html page:

    
Then you create a <div> element, give it an ID, and use CSS to position it wherever you want. I'm going to use in-line styles because it keeps all my code together but embedded and external style sheets work just as well.
    <div id="IMAGE_GOES_HERE" style="position:absolute;left:5%;top:5%;width:90%;height:90%"></div>
And finally, the Javascript to load the image into the DIV:
    <script type="text/javascript">
        nextlook.loadImage("101.252.0.1cc0.1330", "IMAGE_GOES_HERE");
    </script>

The second argument to the loadImage function is obviously the ID of the DIV, but what about the first argument ?
This is the ID of the image. When you upload an image file to NextLook and after the NextLook servers have finished processing the image, you can find the ID on the "Image Info" tab.

Putting it all together here is a complete html page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name = "viewport" content="width=device-width"/>
    <title>Simple Embedded Image Example</title>
    <script type="text/javascript" src="http://core.nextlook.com/nl.js"></script>
</head>
<body>
    <div id="HERE" style="position:absolute;left:5%;top:5%;width:90%;height:90%"></div>
    <script type="text/javascript">
        nextlook.loadImage("101.252.0.1cc0.1330", "HERE");
    </script>
</body>
</html>

And in a web browser, it looks like this.

Notice that as you resize the window, the image adjusts. Also, if you try it on a mobile device, you'll see that as you zoom-in using pinch zoom, the resolution increases. But how do you zoom in on devices that don't have pinch zoom and can you increase the amount that you can pinch zoom ? Lets move on to our next example: Zoom and Other Controls