2011-09-25

If you've been to websites that display photographs, you may have seen this little gadget - potentially graphic photographs are hidden from the user and they are only displayed when he or she confirms the desire to see it. One example of this is The Big Picture.
I decided to develop something like that in jQuery. Here it is for you to download!
Let's take a look at the HTML code first.

What that does is it displays a black square where the photo should be, with a warning. It has the height put in explicitly to reflect the size of the picture. If the user clicks anywhere on the black square (not necessarily the warning message), the photo will appear.
Now, the interesting bit, the jQuery bit.

OK, let's describe it step by step.
The whole thing is wrapped in this:

$(function() {
// This will run on windows onload.
// ...
});

The dollar sign ($) is obviously jQuery. By passing it a function like that we make sure that the function will run when the HTML document is loaded, i.e. when all page elements are available. What is worth mentioning, you can make the call many times and all of the given functions will run when body is loaded in the order they are declared.

Here we use jQuery bind function to bind an event, which is a jQuery preferred way of event handling free from browser inconsistencies. We then obtain the hidden image to show it and the warning message to hide it. We also change the cursor to the default one (from pointer) because there is nothing else to click on.
Here we redirect warning message onclick event to the div onclick event to avoid duplicating code.