A class is like a sort of template for an object. We can create our own classes, but in this case TripTracker has created it for us. It is called the PhotoViewer class. It is instantiatable, with no parameters, so we can create it easily using the new keyword, like this:

This is a standard JavaScript statement. The "var" tells the browser to create a variable. A variable is like a sort of storage box for data. In some languages, you have to tell the program what sort of data is going to be stored, but in JavaScript we just need to give it a name - we've called ours "slideshow" for simplicity.

Now, the second part of the statement sets it to the class "PhotoViewer". This means the object we have created is a PhotoViewer object called "slideshow". This gives the slideshow object a range of methods (not properties in this case) for performing the tasks we want.

Before we can show the slideshow, we need to add the images. This is easy to do - there exists an add() function, which is overloaded. We use it like this:

The first parameter is the location of the image. However, we can also add a caption, like so:

In fact, this can be customised further, to include a date and time of capture:

You can choose either one, two or three parameters. Only the first is essential, but you may want more or less options.

Customising time!

Before we show the slideshow, we can set some other parameters as well, in the form of more methods of the PhotoViewer() object. Here are some implementations of them:

By default, the slideshow remains still when you open it, until you press play. We can tell the slideshow to start playing automatically with a simple call to enableAutoPlay(), which takes no parameters:

Likewise, to disable it again, call disableAutoPlay().

We can set the duration of each slide, in milliseconds, by calling another method, this time with the parameter:

In the code above, each picture will be shown for 6 seconds.

If you don't like the two transition effects that the slideshow displays by default, you can disable fading:

... and panning:

Of course, use enablePanning() and enableFading() to put them back on again.

There are many other customisations. Here  they are:

Hopefully the names make each method self-explanatory. Just remember which parameters are integers and which are strings. Oh, and close the <script>tag when you're done customising the slideshow.

Showing the Slideshow!

This is easy. Simply call show(), passing in one parameter - the index of the picture to start on. Type zero for the first one in the list.

Of course, the link can be on an image or anything. It's up to you. Have fun!