Using JavaScript Click Interceptions in an Image Gallery
(Page 1 of 4 )
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.
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!
Next: Building the basic structure of an image gallery >>
More JavaScript Articles
More By Alejandro Gervasio
