Using JavaScript Click Interceptions in an Image Gallery
If you’re a web developer with an intermediate level of experience building JavaScript applications, then you may have already used click interceptions in one form or another. Basically, as its name would suggest, this client-side method consists of “catching” a mouse click that occurs on a selected element of a web page to modify its default behavior. In this second part of a four-part series, you'll learn how to use click interceptions in an image gallery.
Using JavaScript Click Interceptions in an Image Gallery - Building the basic structure of an image gallery (Page 2 of 4 )
Before I get my hands dirty coding any practical example, let me explain briefly how I plan to build this sample image gallery, which will be improved later on by means of click interceptions. First, the gallery in question will be comprised of a list of regular HTML links, which, when clicked on, will display in a different window a predefined image associated with the text included in each link. Still with me?
Then, once this basic image gallery has been constructed, I'm going to use a few click interceptions to change the default behavior of the aforementioned links, and consequently, show the images on the same web page, instead of using a distinct one.
But, as I said before, this process will be performed later on. So pay close attention to the definition of the following (X)HTML file, which is responsible for building the pertinent list of image links:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Example on building an image gallery using click interception</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
a:link,a:visited{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #00f;
}
a:hover{
color: #f90;
}
#linkcontainer{
width: 300px;
padding: 5px;
background: #eee;
}
#imgcontainer{
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1>Example on building an image gallery using click interception</h1>
<div id="linkcontainer">
<ul>
<li><a href="sampleimagea.gif" title="First sample image goes here">View first image</a></li>
<li><a href="sampleimageb.gif" title="Second sample image goes here">View second image</a></li>
<li><a href="sampleimagec.gif" title="Third sample image goes here">View third image</a></li>
</ul>
</div>
<div id="imgcontainer"></div>
</body>
</html>
As you can see, the above (X)HTML file is quite simple to grasp, since all that it does is display a list of three links, which, when clicked on, will show a specific image in a different window. In this case, the sample images that I'm going to use here are called "sampleimagea.gif", "sampleimageb.gif" and "sampleimagec.gif" respectively. If you're curious about how they look, you can take a look at them below:
So far, everything looks good. If you test the previous (X)HTML file on your own browser, in conjunction with the three images shown above, then you'll end up seeing a list of descriptive links, which, when clicked, will display the associated image in a different window.
But what if I want the images in question to be shown in the same web page? Here's where click interceptions come in. It's possible to develop a small JavaScript application that changes the default behavior of each link included in the previous image gallery to display all the images within a predefined container of the same web document.
Sounds pretty interesting, doesn't it? However, to see how this process will be performed, you'll have to click on the link below and keep up reading.
JavaScript 
Improving an Image Zooming Application with JavaScript
