Using JavaScript Click Interceptions in an Image Gallery

Introduction

In most cases, the reason for intercepting clicks is simply to extend, by way of  JavaScript, the existing functionality of a certain server-side web application. Logically, however, click interceptions can be used in many other cases too.

I imagine that you may wan to learn how to apply this handy JavaScript-based approach in real-world situations, such as submitting web forms via Ajax, building dynamic image galleries, or creating detail web pages for a database-driven web site.

Naturally, if all of these examples sound interesting to you, then continue reading this article series. In the different tutorials that comprise it, you'll learn the basic concepts that surround the implementation of click interceptions with JavaScript, and how to apply them to expand the existing functionality of certain web applications, such as the ones mentioned above.

In case you haven't yet read the preceding article of this series, let me tell you that in it, I demonstrated how to implement the aforementioned click interception approach to submit and validate a simple web form with Ajax. Essentially, this process was performed by "intercepting" via JavaScript each mouse click that occurs when the form in question is submitted, in this way making it possible to handle the pertinent form submission by mean of an XML HTTP Request Object instead of using the form's default behavior. That's not too hard to understand, right?

Click interceptions can be used in many other cases, not only to submit web forms with Ajax. Taking into account the intrinsic versatility offered by this method, in this second part of the series I'm going to teach you how to use it to extend the behavior of a basic image gallery.

Sounds pretty interesting, doesn't it? Thus, come with me and learn how to improve the functionality of the an image gallery by using click interceptions. Let's get started!