Simple Javascript Photogallery

Here is an example of a very simple photo gallery.

View the source and lets look at it peice by peice:

function getImagePanel(){
          return document.getElementById("imagePanel");
}

This function is a shorthand to get the image element. The next tutorial will be on what exactly the 'document.getElementById' does and why it works, but for now it is simple enough to say that when you call 'document.getElementById("some-id")', it will give you an object from the html document. In particular, look down to this bit of html:

<img id="imagePanel" src=""/>

So basically we have set up an image box for us to put our images into. Then we gave it the ID of "imagePanel" so that we can modify it in our javascript.

Moving on, we have a few global variables:

var currentImage = 0;
var imageList = [ "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Youngkitten.JPG/800px-Youngkitten.JPG",
"http://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Domestic_cat_cropped.jpg/755px-Domestic_cat_cropped.jpg",
"http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/2_russian_street_cats-crop.jpg/800px-2_russian_street_cats-crop\
.jpg"
];

Global variables can be referenced in any function in the entire document. Here, 'currentImage' is the index of the current image. The 'imageList' is an array of strings, in this case, image URL's of the pictures we want to display.

There are a number of important data structures that we will cover. The most basic and perhaps most useful is the array. An array can be thought of as a list of items that can't be added or removed from. In this example, the list holds file urls.

We can refer, for instance, to the first image location as 'imageList[0]' (These things are 0 based -- the first element is at zero, the second at 1, etc). If we combine this with the global 'currentImage', we can always get the current image location by 'imageList[currentImage]'. For instance, we have a function that will update the displayed image to the one specified by 'currentImage':

function setCurrentImage(){
     getImagePanel().src = imageList[currentImage];
}

Now whenever we change the currentImage variable, we can simply call 'setCurrentImage()' and the correct image will display. Notice that we are getting the image element, and setting the 'src' attribute to whichever image url we want. We do this in the functions we use to go forward and backward in the image list, which just happens to be this:

function rightClick(){
     currentImage++;
     if(currentImage > imageList.length - 1)
          currentImage = 0;
     setCurrentImage();
}

function leftClick(){
     currentImage--;
     if(currentImage < 0)
          currentImage =      imageList.length - 1;
      setCurrentImage();
}

You can observe the logic given to looping the 'currentImage' variable whenever it reaches a value above or below valid values. Ideally, the value should be equal or larger than 0, and less to or equal to the length of the array. Then we call that 'setCurrentImage()' to refresh the image panel.

Now we have to attach the links we provided for forward and back to the functions 'leftClick' and 'rightClick'. The way we do this is by setting events on the buttons we provide. Those buttons actually are html links:

<a id="anchor" href="#anchor" onclick="leftClick();"> <-- </a>
<a href="#anchor" onclick="rightClick();"> --> </a>

HTML provides alot of these kind of 'hooks'; where we can have fire off a javascript function when something like a click happens.

Right after that, we put another bit of script in. It doesn't appear in a function, so it executes as soon as it loads. This will make set the image to be correct on loading:

<img id="imagePanel" src=""/>
<script> setCurrentImage(); </script>

Thats it for the photo gallery. Leave a comment if anything is still a mystery about the code. Next time we will discuss the document object model, and how we can use that to do cool things.