components
This page illustrates some of the many standalone components that I have developed. By "component" I mean a self-contained unit of code that can be dropped into a site to perform some special function. A jQuery plugin is an example of a component in this usage. But it is possible to develop JavaScript-only components, or on the server side a PHP class definition that functions in this manner. A Greeting Card Viewer

This is a greeting card viewer that I developed for Under Heaven and Earth LLC's website. In a sense it is a general purpose image viewer, except that it has been extended to support inside images and the ability to open and close both vertically and horizontally. This simulates a card, where one can open it to view the inside content.

The opening and closing are implemented using a bit of JavaScript and CSS3 3D transforms.

A Slideshow Plugin

Transition Effect:  

Here is a plugin I wrote to run slideshows on generic content. I wrote it to support a number of different image transition effects. I have used it on many of the sites I have created, as the slideshow is a popular element on many modern sites.

To run a demo of it, you can optionally select a transition effect above, then click on the image.

A Video Player Plugin

Here is a video player plugin that I developed for an application I wrote some years ago. It was designed to play native mp4 files, and supports all the usual functionality, including a fullscreen mode. The volume is adjusted by clicking on the horizontal volume slider, and you can seek to any spot in a video by clicking on the horizontal time slider.

The example mp4 used here is a performance by the great British classical guitarist, Julian Bream, of Issac Albeniz'z piece, Cordoba. The performance dates from sometime in the 1970s, as Bream is now in his 80s. The backgrounds in the video are all scenes from Cordoba, an old city in Spain.

Click on the image above to start the demo.

Just For Fun: A Pendulum Clock

This was a just-for-fun project I did years ago to experiment with the <canvas> and <audio> tags of HTML5. Although certainly not necessary, I implemented it as a jQuery plugin. The visual manipulation of the clock hands involves using a <canvas> tag, obtaining a 2D drawing context, and applying rotational transforms to them. The plugin plays a chime at the top of every hour, consisting of a "song" followed by a chime for eack hour. I also added a toggle to turn the tick-tock sound on or off, and a button to play the chimes, as waiting for te top of the hour can take a long time.

Click the image to start the demo.