NextLook Slideshow Example


Creating a NextLook slideshow is very simple. Look at the following html page.

In a web browser, it looks like this.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name = "viewport" content="width=device-width"/>
    <title>Simple Slide Show</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">
      var ss = nextlook.createSlideshow("HERE");
        ss.loadImage("101.252.3.1cc0.1330");
        ss.wait(2000);
        ss.zoomTo(5700, 2750, 1.0, 5000);
        ss.wait(2500);
        ss.crossFade(3000);
        ss.loadImage("101.252.4.1cc0.1330", 4150, 3600, 0.25);
        ss.wait(2000);
        ss.zoomTo(6400, 4250, 1.5, 5000);
        ss.wait(2500);
        ss.zoomTo(6400, 4250, nextlook.fit, 5000);
        ss.wait(2500);
        ss.crossFade(3000);
      ss.play(true);
    </script>
</body>
</html>

The first thing to notice is the nl.js javascript file in the head section. This is required.

There are really only two other significant things on the page. There is a DIV element positioned where you want the slideshow to appear and then there is some javascript. The javascript creates a slideshow, adds various images and actions to the slideshow and then plays the slideshow. It's fairly obvious what all the slideshow member functions do but the member function arguments require some explanation so here is a complete reference for all the api functions used in this example.

nextlook.createSlideshow( div_id )

Purpose: Creates a slideshow object.

Returns: The slideshow object.

Arguments

div_id: The id of the DIV element where the slideshow will be created.

ss.loadImage( image_id, center_x, center_y, scale )

Purpose: Adds an image to a slideshow.

Arguments

image_id: The id of the image. You can get this from the "Image Info" tab once an image has been uploaded to the nextlook.com web site.

center_x: (Optional) the X coordinate (in original image pixels) which you want to be in the center of the image if the image is zoomed in. The admin utility that you use to upload and organize your images shows you these coordinates when you zoom into an image. If you omit this and all subsequent arguments then the image will be centered in the div and cropped to the same aspect ratio as the div.

center_y: (Optional) the Y coordinate (in original image pixels) which you want to be in the center of the image if the image is zoomed in.

scale: (Optional) The scale of the image when it is initially loaded. A scale of 1.0 is 100% and is usually as large as you can go without loosing some image quality.

ss.wait( time )

Purpose: Adds an pause to a slideshow. Usually you will want to add a pause after each loadImage and zoomTo function.

Arguments

time: The number of milliseconds to pause.

ss.zoomTo( center_x, center_y, scale, time )

Purpose: Pans and/or zooms the current image to a new center and scale.

Arguments

center_x: The desired new horizontal center of the image (in original image pixels) when the pan/zoom is complete. The admin utility that you use to upload and organize your images shows you these coordinates when you zoom into an image.

center_y: The desired new vertical center of the image.

scale: The new scale of the image. A scale of 1.0 is 100% and is usually as large as you can go without loosing some image quality. A value of nextlook.fit will zoom out the image to fit in the div. In this case, the image center (as given by the center_x and center_y arguments) will be maintained as long as possible during the pan/zoom.

time: The number of milliseconds to use to complete the pan/zoom function.

ss.crossFade( time )

Purpose: Adds a cross fade from the current image to the next one.

Arguments

time: The number of milliseconds to use to complete the cross fade.

ss.play( repeat )

Purpose: Plays the slideshow.

Arguments

repeat: If true, keeps repeating the slideshow in a loop, otherwise only plays it once.


Additional API functions

There are a few other API functions which are not used in the above example but which you may need. These are explained here.

ss.adjustHeight( aspectRatio )

Purpose: Adjusts the height of the div containing the slide show (by using inline styles) so that it has the given aspect ratio. This function is useful if you want the width of the slideshow to be e.g. a percentage of the window width but you want the height of the slideshow to be a fixed ratio of it's width rather than a percentage of the window height. Usually you would call either this function or the following adjustWidth() function before any loadImage() function in the slideshow.

Arguments

aspectRatio: The desired aspect ratio (width/height). e.g. 4/6 for a typical portrait or 6/4 for a typical landscape.

ss.adjustWidth( aspectRatio )

Purpose: Adjusts the width of the div containing the slide show so that it has the given aspect ratio.

Arguments

aspectRatio: The desired aspect ratio (width/height).

nextlook.enableWarnings()

Purpose: Call this function before calling nextlook.createSlideshow so that warning and error messages (invalid image_id, invalid div_id, etc) will be displayed in the browser console. Otherwise all errors will be silently ignored.

That's the complete slideshow API. If you still have questions then you're best option for the moment is to contact us at support@nextlook.com.