Using JavaScript Click Interceptions in an Image Gallery

As you might have guessed, changing the default behavior of each link that comprises the image gallery that you saw in the previous section is only a matter of defining a JavaScript function that first "intercepts" the mouse clicks, and then displays the sample images within the same web page, instead of opening a new window.

Below I coded two brand new JavaScript functions which are responsible for performing the tasks mentioned. Here they are:

// define 'displayImages()' function

function displayImages(){

var lnkcont=document.getElementById('linkcontainer');

if(!lnkcont){return};

var links=lnkcont.getElementsByTagName('a');

if(!links){return};

for(var i=0;i<links.length;i++){

// use click interception to display images on the same web page

links[i].onclick=function(){

var imgcont=document.getElementById('imgcontainer');

if(!imgcont){return};

// if there is an existing image, remove it from the container

if(imgcont.firstChild){

imgcont.removeChild(imgcont.firstChild);

}

var img=document.createElement('img');

img.setAttribute('src',this.href);

img.setAttribute('alt',this.title);

imgcont.appendChild(img);

return false;

}

}

}

// call 'displayImages()' function when web page is loaded

window.onload=function(){

if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

displayImages();

}

}

Undoubtedly, in this specific case, the "displayImages()" JavaScript function defined above is the most relevant piece of this schema. It uses the click interception method to modify the default behavior of the links that comprise the sample image gallery. Because of this function, each time one of the links is  clicked, a new image will be displayed on a unique web page container, not surprisingly identified as "imagecontainer."

As you can see, this process is performed by using some conventional DOM methods, so I assume that you shouldn't have major problems understanding how this works.

And finally, the pertinent "displayImages()" JavaScript function must be called after loading the whole web page, so I simply attached it to a "window.onload" statement.

Well, at this point I showed you how to use some click interceptions to extend the existing behavior of a basic image gallery. In this particular case, each time a descriptive link of the gallery is clicked on, it will trigger the pertinent click interception, and as a consequence, the image associated with it will be shown in the same web page container.

However, and this is a direct consequence of building a JavaScript application that degrades gracefully, if scripting is disabled on the browser, the image gallery will still work seamlessly. Isn't this a good programming habit? You bet it is!

Now that you understand how the previous "displayImages()" JavaScript function does its thing, it's time to show you the complete source code for this small client-side application that uses click interceptions to extend the existing behavior of a basic image gallery.

However, as you may guess, this will be done in the course of the next section, so jump ahead and keep reading.