ChunkySoup.netServing hearty nuggets since 2001

Intro to Object Oriented JavaScript

Part 3: Designing a Photo Gallery with OO JavaScript

Rather then throw any more jargon at you, the remainder of this article is devoted to a set of sample objects created for use in this photo gallery. This example is adapted from my third photo project that lives over at placenamehere. I've simplified the example a bunch, but when you're done with this article you should know enough to read the code there and understand where those objects are different (be warned, its a bit sloppier).

Take a moment and interact with the gallery interface. Its a pretty simple page. You have 5 photographs being displayed. By rolling over the navigation widgets the visitor can see a preview of the photograph, and by clicking the widget they get a full view of the photograph.

If you were to develop this page in a procedural style your code might be structured something like this:

  • an array holding thumbnails 0-4
  • an array holding full sized images 0-4
  • a function to preload some of the images
  • a swap image function
  • an assortment of event handlers to call the swap image function with the appropriate parameters.

Instead, we will examine the different elements on the page and create custom objects to represent them.

Custom Objects

The Navigation Object

CSNPhotoNavObject Object Diagram

The first element on the page that we need to deal with is the navigation widget. It's this object that listens for user interaction and knows when to trigger other stuff happening to the page. The navigation objects don't need to know all the intimate details of the other things on the page, they just need to be a sort of traffic cop. In this particular page each navigation widget controls one photo, both by changing the thumbnail and changing the larger photo. In the first iteration of the object we will also simplify it a bit by making it a text link instead of an image so we don't have to think about changing the widgets image on rollover. This leaves us with an object that looks like the following:

  • a way to signal setting the thumbnail on mouse over
  • a way to signal clearing the thumbnail on mouse over
  • a way to signal setting the full image on click

To do this, it needs to know the following information:

  • how to find the one photo it controls

You might look at the above and think there are a bunch of things missing. Knowing which thumbnail or photo on the page to change might be two of those things. All of those specifics I've left to the photo object. Going back to the idea of a traffic cop, all I want this object to do is tell something else to go, stop, or turn. It should be ignorant of the process in which the object its talking to will get that done.

The Photo Object

CSNPhotoObject Object Diagram

Looking at the finished example again you might think their are two other objects on the page we need to deal with — the thumbnail and the main photograph. While I could have modeled the page that way I chose to instead take a step back and look at it from the standpoint of the data that I needed to make things happen rather then stick strictly to DOM objects that are on the page. When I did this I realized that I was really dealing with individual photographs that just happened to have two representations on the page — a thumbnail and a full view. The photo object will then look like the following:

  • a way to set the thumbnail
  • a way to clear the thumbnail
  • a way to set the full image
  • a way to preload the thumbnail images

To do this, it needs to know the following information:

  • a DOM reference for its thumbnail image
  • a DOM reference for its full size image
  • the URI of the activated thumbnail image
  • the source of the activated thumbnail image
  • the URI of the cleared thumbnail image
  • the source of the cleared thumbnail image
  • the URI of the full size image
  • the source of the full size image

You will notice the repetition in the above description. Even though there is only one thumbnail image we need to know two things about it. The same goes for two other graphics that we are using. This repetition will be the basis for one more object that we will create. That object will be a smart image object. I call it smart because it will know about both its URI and the source and when requested, and will also provide a mechanism for preloading the image.

The Smart Image Object

CSNSmartImageObject Object Diagram

To create the smart image object we will steal anything that relates to an image from the definition of the photo object. We can then plug the use of this new object into all the holes that were left behind. This new object will have:

  • a way to preload the image
  • a way to get the images source (preloaded or not)

To do this, it needs to know the following information:

  • the URI of the image source
  • the source of the image (via a JavaScript image object)
  • a flag for whether the image has been loaded