In this tutorial photographer Ted Lansing illustrates how to use jAlbum to create professional Web galleries for photographers. Based on the design and implementation of www.tedlansingphotography.com the tutorial describes the concept and steps to integrate jAlbum galleries into an existing site. Don't be overwhelmed by the length of this tutorial. It is kept at a very basic level and assumes no prior knowledge of jAlbum.

jAlbum for Gallery Pages

I was looking for a simple yet elegant solution to present my portfolio on the Web. The idea was to create Web pages with galleries to present my images and additional pages for contact information, about information and blog entries. Figure 1.1 illustrates the first sketch of the web solution and the final implementation with jAlbum for gallery pages.

Figure 1.1) First sketch and final realization of www.tedlansingphotography.com

After extensive research of gallery applications, I opted for jAlbum.

jAlbum is a PC desktop application to create and manage image galleries to be displayed in Web pages. The concept to build and publish galleries is comprised of two steps:

1. Add images to jAlbum

2. Create gallery and upload it to Web server

Figure 1.2 illustrates this concept. In jAlbum images are added to an album project. Once the images are added the gallery is created and uploaded to the Web Server by a mouse click. Visitors now can access the Web pages and view the embedded gallery.

Figure 1.2) The concept of jAlbum; Galleries are created and uploaded to the Web server.
The Web server integrates the galleries with the web page and delivers the Web pages.

jAlbum offers these important features:

• Ability to integrate galleries into existing web pages

  • Use of own Internet Service Provider (ISP) to host the image galleries,

  • Use of own domain name,

  • Use of own layout and design,

• Ability to customize look & feel of gallery

• Unlimited galleries with unlimited images per gallery,

• Use of PC application to manage gallery content and to upload to Web server.

Design of Web Solution

I wanted www.tedlansingphotography.com to look simple yet elegant. The graphic design should put emphasis on the images of the galleries. Therefore, the web pages were designed with little text and with a lot of white space. Further, the Web pages should equally well display in a browser on a desktop/notebook PC and in a browser on a tablet PC.

The web solution is structured into six pages, three of them pages with a gallery:

• Architecture page: to display the architecture image gallery (gallery page)

• Landscape page: to display the landscape image gallery (gallery page)

• Aviation page: to display the aviation image gallery (gallery page)

• About page: to display about information

• Contact page: to display contact information

• Blog page: to display blog entries

All pages are structured into three areas:

1. Header with navigation,

2. Main part with either an image gallery or other information and

3. Footer with copyright information.

The main part of a gallery page contains the image gallery, which is comprised of two sections:

• Gallery navigation area; a set of thumbnails and

• Image display area; image of selected thumbnail.

Figure 2.1 illustrates this structure of the gallery page.

Figure 2.1) Visual design and Web page structure of gallery page

Implementation of Web Solution with jAlbum

Implementing the Web solution based on jAlbum consists of two parts:

1. Embedding the jAlbum gallery into the gallery web page.

2. Creating the jAlbum gallery using the jAlbum desktop application.

These aspects are further described in the next two sections.

Embedding the jAlbum Gallery into Gallery Web Page

A gallery is created by the jAlbum application and uploaded into a directory on the Web site.

There is one prerequisite that the jAlbum gallery is shown in a Web page: The gallery needs to be embedded into the Web page. This is accomplished by referencing the gallery within the Web page. The following HTML code snipped shows how this is accomplished for the ‘landscape gallery’ of the ‘landscape web page’:

<iframe src="http://www.tedlansingphotography.com/landscape/" class="album" frameborder="none">
</iframe>

The field src of the iframe statement contains the URI that points to the folder on the Web server where the gallery resides and where it is uploaded from jAlbum as illustrated in Figure 3.1.

Figure 3.1) Embedding the jAlbum gallery into a Web page with the iframe statement. The iframe statement in the Web page points to the folder with the jAlbum gallery files.

Creating the jAlbum Gallery

Galleries are created and managed with the jAlbum desktop application. Once the images are added to an album in the jAlbum desktop application, the gallery can be created and all files can be uploaded to a folder reserved for the gallery files. To create a jAlbum gallery and upload to the Web server follow these seven steps:

1. Open jAlbum

2. Create and name gallery – Create a new album. Give it a name; in this case ‘landscape’.

3. Add images to album and put them into desired order – Simply drag and drop the images for the gallery into the image pane of jAlbum. Move them into order.

4. Select the Galleria skin – Select the album ‘landscape’. In the skin and style pane select the Galleria Skin and set the style to light. To achieve a different look & feel a different skin can be downloaded (from the jAlbum web page) and selected.

5. Configure the look & feel of the gallery – Adjust the settings of the gallery to match the desired look & feel. Details see section ‘Configuring the Look & Feel of the jAlbum Gallery’.

6. Create gallery – Press the ‘Make album’ button. The jAlbum application creates the gallery ready to be uploaded to the Web site.

7. Upload gallery – Press the ‘Upload button’. The jAlbum application uploads the gallery to the Web site. At the first time you have to specify the location of the gallery on the Web server.

Figure 3.2 illustrates these seven steps and links them to the user interface of the jAlbum application. To create and upload a gallery simply follow the jAlbum controls from top to bottom in the left hand control pane of jAlbum.

Figure 3.2) The seven steps to create a jAlbum gallery

Configuring the Look & Feel of the jAlbum Gallery

The desired look & feel of a gallery is primarily defined by the jAlbum skin. A skin is a plug-in to the jAlbum desktop application that customizes the look & feel and feature set of your gallery. There are many quality skins available for download. I chose the Galleria skin and set it up for the desired look & feel. Table 3.1 General Settings and Table 3.2 Thumbnail Settings illustrate the settings.

General Settings
Show album title	No
Show album description	No
Show section divider lines	No
Colors
Background color	#ffffff
Text color:	#333333
Link color:	#9a9a9a
Active link color	#606060
Main image
Border type	None

Table 3.1) General Settings

Thumbnail Settings
Thumbnails scroller
Visible thumbnails	8
Scroller arrow width	20px
Scroller arrows height	40px
Scroller animation duration	100
Thumbnails icons
Border type	solid
Border width	1px
Border color	#ababab
Margins	10px
Opacity	66
Selected thumbnail icon
Border type	solid
Border width	1px
Boder color	#ababab

Table 3.2) Thumbnail Settings

To control the white space at the top and bottom of the gallery the Galleria style sheets and a jAlbum script were slightly modified. These changes are optional and might apply only to this specific Web page design. They are listed here to show that further modifications beyond setting parameters of the skin are possible to modify the look & feel of the gallery.

The following tables contrast the original and modified parts of the style sheets and scripts. Changes are highlighted in yellow.

Original	Modified
body { margin: 0; padding: 10px 0 30px 0; text-align: center; font-size: 14px; font-family: georgia,serif; }	body { margin: 0; padding: 0px 0 0px 0; text-align: center; font-size: 14px; font-family: georgia,serif; }

Table 3.3) Changes in style sheet \jAlbum\skins\Galleria\res\index.css

Original	Modified
#folders_container, #bottom_container, #top_container { border-width: <%= showDividers ? "1" : "0"; %>px; }	#folders_container, #bottom_container, #top_container { border-width: <%= showDividers ? "1" : "0"; %>px; height:0px; padding-bottom:0px; padding-top:0px; }

Table 3.4) Changes in style sheet \jAlbum\skins\Galleria\common.css

Original	Modified
<div id="footer"> <% showCopyrightText = copyrightText != null && copyrightText.length() > 0; … … . </div>	All code was deleted in order to remove the footer of jAlbum. File is empty. Before the changes, the original file was saved as footer-original.inc.

Table 3.5) Changes in style sheet \JAlbum\skins\Galleria\includes\footer.inc

Summary

jAlbum makes creating and managing galleries simple. First a few simple tasks are necessary to set up the gallery:

• Download and install jAlbum,

• In jAlbum desktop application: Create gallery, set look & feel of gallery and set upload path,

• In gallery web page: Embed jAlbum gallery by adding a reference to the gallery folder

Once this is set up, managing galleries is simple as:

• Drag and drop images to the jAlbum desktop application

• Create gallery by pressing one button

• Upload gallery by pressing another button.

In summary, jAlbum can be configured to achieve the desired look & feel of image galleries in customized Web pages. A screenshot of a final gallery page of www.tedlansingphotography.com is shown in Figure 3.3.

The process of creating the gallery pages and managing galleries is easy and straight forward, perfect for publishing images on the Web.

Figure 3.3) The final ‘landscape’ gallery page