5. jQuery

In this section of my tour of Aviation Photo Gallery, I will look at jQuery. jQuery is an open-source library of JavaScript functions, which enables interactive content to be added to web pages.


The jQuery website can be viewed here.

The jQuery library is contained in a single JavaScript file, which can be linked to a web page. The jQuery syntax can then be used to, among other things:

  • Select HTML elements and perform some action on them;
  • Handle events, such as mouseovers or clicking a button;
  • Add various effects, such as Hide, Show, Toggle, Slide, Fade and Animate.

jQuery also supports the use of plugins. These are additional software components which add extra functionality to the basic jQuery. Plugins can be found at the jQuery Plugin Registry.

SlideUp / SlideDown Panels

jQuery has become incredibly popular with the open-source web development community over the last few years. There are so many tutorials, plugins and widgets that it's difficult to know where to start. So I decided for my first venture into jQuery to try something relatively simple: sliding panels.

Sliding Panels

When the "plus" symbol is clicked, a jQuery function causes the links to slide out underneath, and a "minus" symbol to appear.

When the "minus" symbol is clicked, another jQuery function causes the links to slide back up and disappear.

I used this technique in the Updates section on the home page of Aviation Photo Gallery. It enables a long list of links to be presented in a much neater way, and enables the user to view only the links he wants.

I learned the basic technique for this effect in Learning jQuery, Third Edition by Jonathan Chaffer and Karl Swedberg. The companion website for this book can be viewed at Learning jQuery, Third Edition.

More Sliding Panels

I also used jQuery sliding panels for my Guestbook and Contact terms and conditions.

This time the sliding panels have different background colours from the rest of the page.

jQuery Slideshow

For my next venture into jQuery, I decided to add a slideshow to the home page of Aviation Photo Gallery, to display preview images of new photos and links to their corresponding pages.

My slideshow is based on a tutorial on the Six Revisions website. To view the original tutorial, click here.

The original slideshow in the tutorial works very well, but it required some modification. It had to be re-sized to fit into the Updates section of my home page. The layout and colour scheme also had to be modified, to match the existing colour scheme of Aviation Photo Gallery. This involved modifying the original jQuery and CSS code from the tutorial, and creating new buttons with a graphics package. Finally, all the code was modified to validated HTML.

The finished slideshow looks like this:

jQuery Slideshow

The completed jQuery slideshow is very easy to modify whenever I add new photos to the website. Only the links to the photos and some text require to be updated.

jQuery Plugin

For a variation on the slideshow theme, I decided to use a jQuery plugin (an additional software component which adds extra functionality to the basic jQuery). My plugin slideshow uses the Cycle Plugin, and it displays a selection of the 300x200 pixel images which have previously appeared on the home page.

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects, such as scroll, fade and zoom. It works by linking a JavaScript file to an HTML page. Various options can then be customised by jQuery syntax on the HTML page, including pause, resume, random and delay.

The finished plugin looks like this:

jQuery Cycle Plugin Slideshow

As with my other slideshow, I have customised the appearance and colours of the Cycle Plugin to match that of Aviation Photo Gallery.

In the next section of the tour, I will look at Bootstrap.