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:
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.
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.
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.
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:
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.
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:
As with my other slideshow, I have customised the appearance and colours of the Cycle Plugin to match that of Aviation Photo Gallery.