About the Skins


I spent my working years in the computer business - programmer, systems analyst, consultant, and system administrator, with an occasional foray into legal work involving IT contracting. I took early retirement at the advanced age of 46 and started traveling, camera in hand. I was always looking for a way to share my travel pictures with others. Handing someone an album and standing there while they flip through it is somewhat aggressive, and subjecting others to a slide show is almost unspeakably cruel.

A website is the answer - others can look at the pictures or not, as they choose, and at their leisure. I grabbed a domain name, and started cobbling together some simple album pages for the web, but generating them by hand was a huge amount of work, and the results were primitive, at best.

Then I discovered jAlbum, and never looked back. I used Laza's Chameleon for a while, but was bothered by the fixed image size. At one point, I even assembled four separate versions of my albums with different image bounds and with a monitor-size detection script on the front end. I gave that up for the Boxer skin, based on the Highslide JS expander, which adapted better to different monitors. But I found myself doing a lot of modifications on the skin to make it do what I wanted it to. When my list of changes grew to cover many pages of crib notes, and its developer showed no signs of being willing to improve upon it (or even to fix bugs in it), I created the Matrix skin, building on Boxer. Today, many versions later, they share virtually no code, other than the underlying Highslide JS script (and even that has my own customization buried in the code).

My travel site continues to expand, aided by the shift from film to digital photography: My Travels.


To me, the primary feature of Matrix is that the image display adapts to the size of the viewport, using as much of the screen real estate as it can. Visitors with laptops aren't presented with scrollbars, while visitors with large monitors get a good show. Second, but of almost equal importance, is that Matrix is all about customization. Even using the preset styles, the user can alter many aspects of the look and feel of the album. Using the Custom style, there are few limits. I often don't recognize albums produced with Matrix, because the users have put together options in ways that never occurred to me. Finally, the extension of the skin to support videos allows users to create very diverse albums, yet with a unified design.

The skin is not fully responsive - the thumbnail page can do some stretching and shrinking, but doesn't work well on a phone - and there is no support for swipe gestures. This is a skin that's aimed at showing off photos to their best advantage on desktop and laptop computers. The bigger the monitor, the better, though it works very well on most tablets (like an iPad). It's all about the images.

Why "Matrix?" All of the design elements are aimed at providing an orderly, orthogonal presentation, based on regular arrays of boxes. There is a "boxless" variation available, though if it's not coupled with fixed-shape thumbnails, I confess that I find it an offense against god and man. But users seem to like it.


MatrixSlide is simply Matrix without the thumbnail page. The albums it produces can stand on their own, as complete web pages, or can be embedded in an iframe on another site. The image display adjusts itself to the size of the visitor's monitor, or to the size of the iframe that contains it. Like its parent, this skin is at its best on a larger display - it works quite well on a tablet, but navigation controls are a bit small for a phone, and it is not touch-enabled.


When I noticed that the Minimal skin, bundled with jAlbum, was mired in mid-1990's coding styles, I offered to help rewrite it. In the process, I realized that there was still a need for a more traditional skin, a skin that produced very clean, straightforward HTML and CSS, and that was more SEO-friendly than Matrix. The result was the Gromit skin.

In its initial incarnation, it contained no Javascript, no Flash, and not even any HTML tables. Adding the capability to include things like keyboard navigation, links to Google Maps, and full responsiveness required the introduction of Javascript, but the code on a page of a Gromit album is still remarkably spare.

Each full-size image has its own page of HTML, something that search engines like to see. All pages are fully responsive, adapting to the size of the visitor's viewport, whether that visitor is using anything from a large desktop down to a phone. The pages respond to simple swipe gestures.

Why "Gromit?" From my first viewing of The Wrong Trousers, I've been a fan of Wallace and Gromit. Gromit is an appealing character - loyal, helpful, but with a healthy dose of skepticism about what's going on around him, traits that we should probably all strive to emulate. The Gromit skin aims to get the job done in a direct way.


Somewhere along the line, it occurred to me that the jAlbum core could be used as a batch processor - an easy way to resize images, to produce thumbnails, to watermark images, or even to organize large numbers of images, without necessarily producing any web pages. The NoPages skin is the result. There's no demo album because it doesn't produce any albums. It just gives you a way to tap into the processing power of the jAlbum engine.

With the advent of video support in jAlbum, the NoPages skin can even be used to convert videos from a wide range of web-unfriendly formats (FLV's, WMV's, oversized MP4's, and so on) to the more usable MP4 with a reduced file size and a file index that's positioned to allow streaming of the video.


I can be reached through the jAlbum forums