This tutorial will teach you how to create your very own jAlbum skin, but you will also learn how to:

• understand the basics of jAlbum code syntax for variables and tags
• layout images in a table on the index page
• add titles and captions to index and slide pages
• work with "next" and "previous" buttons

Getting started

Before you get started it's recommended that you learn the basics of jAlbum skin development by checking out the skin introduction tutorial.

Installing the "MyFirstSkin" skin in the jAlbum application

When creating a new skin for jAlbum you usually never start from scratch, instead you take an existing skin and base your new skin on that. The jAlbum application has a built in feature that let's you create a new skin based on the "Minimal" skin. To find this feature select "Tools", "Skin developer" and "Create new skin" from the menu.

In this tutorial we will however not use this feature. Instead we will base our new skin on a sample skin called "MyFirstSkin". Click this link to download the skin and choose to open the file (do not choose to "Save on computer"). jAlbum will then notify you that it will install the skin.

Launch the jAlbum Skin editor

Launching the jAlbum Skin editor from the "Tools" menu

In the skin introduction tutorial you learned how to edit an existing skin, but in case you forgot, this is how you start the jAlbum Skin editor:

Make sure that you have select "MyFirstSkin" in the skin selection box. Then from the menu, select "Tools", "Skin developer" and "Edit skin files". This will open the relevant skin files for editing.

• index.htt is the template file for index pages
• slide.htt is the template file for slide pages

Remember that these files are basically HTML files containing some special jAlbum variables and tags. You are about to learn how to use some of these available variables and tags in a skin.

You can also use the keyboard shortcut Ctrl+Shift+E (or Cmd+Shift+E if you're on a Mac) to launch the Skin editor.

Add rows and columns

Adding a table of images using <ja:rowiterator> and <ja:coliterator>

Start by selecting the window showing the "index.htt" file. As you can see this template is rather empty, so let's fill it up with some images!

It's time to get aquainted with two of jAlbum's special "iterator tags" <ja:rowiterator> and <ja:coliterator>. These tags repeat their content for each row or column that is to be created.

Now, let's write some code! In the body section of the index template insert the following snippet:

<table>
    <ja:rowiterator>
      <tr>
      <ja:coliterator>
        <td>
          <a href="${closeupPath}">
              <img src="${thumbPath}" style="width:${thumbWidth}px; height:${thumbHeight}px;"/>
          </a>
        </td>
      </ja:coliterator>
      </tr>
    </ja:rowiterator>
</table>

The iterator tags will create a HTML table with all the thumbnails in neat rows and columns.

The thumbnail image tag has a couple of attributes that we're going to take a closer look at.

• The src attribute uses a variable called ${thumbPath}. When the album is generated this variable will be replaced with the path to the generated thumbnail image.
• The style attribute uses two variables, ${thumbWidth} and ${thumbHeight}. These variables will be replaced by the actual size of the image.

In the code snippet above we also link the thumbnail images to the corresponding slide page. This is done using another jAlbum variable, ${closeupPath}, in the href attribute of the anchor tag containing the image tag.

${variableName} is the naming convention for all jAlbum variables.

Take it for a test drive

Previewing the very first album built with your new skin

Save your changes and close the editing windows. It's time to make your first album with your new skin!

Make sure that you have added some images to the jAlbum application and that "MyFirstSkin" is still selected in the skin selector box. Now hit the "Make jAlbum" and sit back as jAlbum lets your skin work its magic. When the album has been built, hit "Preview". The result should look something like the example to the right.

Try to change the Columns and Rows settings on the Pages tab of the jAlbum settings window, and then hit Make Album again. Notice how the layout of the album changes? This is the <ja:rowiterator> and <ja:coliterator> in action!

Add an album title

Giving your album a new title

In the quick introduction tutorial we added a title to the index page. Now we are going doing to do the same thing in this skin, but this time, instead of just writing the full title inside the template file we are going to make the title customizable using a variable.

Once again open up the jAlbum Skin editor and select the "index.htt" editing window. Enter a new line above the table code we previously added and insert the following line of code:

<h1>${title}</h1>

When you are done save your changes and go back to jAlbums main interface by clicking the main window (this way you can leave the editing windows open in the background if you want to). Open up the General tab of your album's settings window and give your album a nice title.

When you are done, press Make Album again and notice your new title appearing above the photos on the index page.

Did you notice that the skin were already using the ${title} variable inside the title tag in the templates head section? This means that the title you entered also will be used as the web browsers window title.