fyvie.net home
home | photos | diving | resources | projects | E+ | info | search

User guide

Getting started

By now you may have created your first album using ExhibitPlus, and you might be curious to find out what else you might be able to do with the skin. The good news is that there are many customisable features which make the task of modifying certain parts of the skin very easy.

ExhibitPlus User Interface (UI) - Index tabExhibitPlus User Interface (UI) - Index tab
ExhibitPlus User Interface (UI) - Slides tabExhibitPlus User Interface (UI) - Slides tab
ExhibitPlus User Interface (UI) - Slides tabExhibitPlus User Interface (UI) - General tab

Setting options

It is possible to control almost all aspects of the appearance of the skin via an easy to use graphical interface. After the skin has loaded you will see an extra tab called "ExhibitPlus" just to the right of the "Main" tab at the top left-hand corner of JAlbum. Once you select this tab you will see a list of options for the skin. These allow you to customise various aspects of the skin. For a quick explanation about what these features do, simply hover your mouse over them and a hint will appear. You can get more detail about the purpose of each of these options in in the reference section, but please understand that each of these controls sets a variable, and it is these variables which are documented in the reference section. If you plan on using these controls, you might like to quickly read the next section about variables just as background information.

Setting variables

Most features can be switched on and off via the use of user variables. The easiest way to do this is by use of the graphical user interface of the skin (see section above). If you would like to change the values of the variables directly simply go to the "Advanced" tab of the JAlbum user interface and you will see a list of variable names on the left hand side, and values for these variables on the right hand side. If you wish to modify any of these values, simply click on the appropriate value and modify it. Please note that both variable names and their values are case sensitive. Please note that any changes made either on the Advanced tab or the ExhibitPlus tab will automatically update the display on the other tab. Therefore you don't have to worry about any values getting "out of sync".

For a full list of variable names and detailed explanation of their user please consult the reference section.

Included files

You will find a folder in the skin directory called "Optional files to be copied to image source directory". These files can potentially alter the behaviour of the skin, and in some cases they may be required. Check this directory and look at the contents of some of these files. At the present time the following files can be used:

For a full explanation about how to use each of these files please consult the reference section.

Setting up the meta.properties file

Each folder needs to have a description entered for it. Create or copy a meta.properties into each folder where your source images are stored. The meta.properites file contains a line that should look something like this:

descript = Our holiday pictures from 1999

meta.properties can contain other fields - for example, to use an alternative folder name instead of the file system's name for the folder, or to specify a particular thumbnail to be displayed instead of the standard folder icon. For more details please consult meta.properties in the reference section.

Language support

Language support is included. You'll find a list of the supported languages under the "General" tab of the ExhibitPlus user interface in JAlbum. By selecting a different language all text strings in the resulting album output will be translated automatically. Would you like your album to appear in a language which is not supported? No problem, all you have to do is to locate the file called texts.properties in the ExhibitPlus directory. If you wanted to have text translated into Arabic you would make a copy of the file and name it texts_ar.properties. Now open the file you've just created and simply translate the text to the right of the equals symbol into the language of your choice. Do this for each line in the file and save the file. Reload ExhibitPlus and you'll see your chosen language appear in the list of choices.

If you make a new translation for ExhibitPlus, please submit it so that other users may also benefit from it.

Using the options

How might you go about changing the appearance of the skin? What sort of things could you do?

Maybe you don't like the colour scheme? Why not use an alternative style sheet? You'll see that the default style sheet called "dark.css" gives all of the pages a dark appearance. Maybe you would prefer a lighter background? Try selecting different style sheets and see if you like the alternatives a little better.

Would you like to also include image names or image comments under the thumbnails on the index page? This is very easily achieved by setting the imageCommentUnderThumbnail and imageNameUnderThumbnail variables to true ("Show thumbnail name" and "show thumbnail comment" on the ExhibitPlus tab).

You should be aware that setting either of these 2 options causes the default behaviour of the index pages to change. By default a "free flowing" mode is employed where the number of rows and columns of the thumbnail images are set dynamically according to the width of the user's browser. Some variables will cause the way images stack next to each other to be altered. This is explained in further detail in the following sections.

Free flow vs fixed format

An example of image placement using fixed formattingFixed format thumbnails do not expand to fit the browser

You may have already noticed that setting the number of rows and columns in JAlbum seems to have no effect on this skin. This isn't strictly correct, it's just that by default "free flow" mode is employed and thumbnail images will automatically fill all the available space in the user's browser. Many people prefer this arrangement, since it cuts down on wasted space. The setting of the number of rows and columns in the JAlbum user interface still affects the total number of images displayed on each index page. For example if you select 8 rows and 4 columns, 32 images will be displayed per index page, though the number of actual rows and columns will be different depending on the size of the browser.

You can force fixed format mode using the fixedFormatIndexPage (or "Display fixed format" on the ExhibitPlus tab).

Inline vs block mode formatting

An example of image placement using freeflow, inline formattingUsing freeflow, inline formatting

It is also important to note that even when the free flowing mode is used there are still some circumstances where the formatting of the thumbnail images may be affected. Using the default settings for ExhibitPlus inline formatting will be used, but once certain variables have been changed from their default then block formatting may be used. Block and inline formatting are HTML 4 terms, and it is not important at this stage to understand them in depth, but those users who are interested may find more information here.

An example of image placement using freeflow, block formattingUsing freeflow, block formatting

The important part for the user of the skin is to understand is that no differences will be seen in the way the thumbnails are laid out on the page, as long as all the thumbnails have the same vertical resolution (or put simply: height). Inline formatting handles this issue much better. Taller images push against the row above and create an empty area above the shorter images on either side of the row. However, in block formatting mode taller images can cause large blank areas to be shown to the left of some images. This almost always creates undesirable results. Unfortunately this effect is unavoidable as some variables require the use of <div> tags within the HTML, and use of these tags automatically cause block formatting to be used. However, there are ways to work around this issue, and users of this skin should think about using some of the following techniques if they have thumbnails of differing heights (for example portrait and landscape thumbnails)

Some examples of variables which will also cause block formatting to be employed are imageCommentUnderThumbnail and imageNameUnderThumbnail.

Working with thumbnails of different sizes

In order to minimise any undesirable effects caused by the use of free flow mode with block formatting, the user of the skin has several options available to them:

Ultimately it will be up to you how to best handle these various situations. If you are lucky you won't need to do anything, but if you find that you aren't getting the results you would like to, the information above might be of some use.

Adding comments to images

There are a few ways to add comments to images.

You use the Edit tab of JAlbum to flip through your images and add comments to them. JAlbum will automatically generate a comments.properties file for you as you go, and if you press the "Write comment" button, it will also write the comment to the EXIF data of your image file.

Changing the titles of images

Just as you can use text files to control the comments used by images (see previous section immediately above) it is also possible to instruct ExhibitPlus to use alternative titles for images. Normally the filename of the image is used, but depending on your requirements this may be undesirable. One way around this is to rename the image files themselves, but many people find this tiresome and for a variety of reasons this option may be unsuitable. If an alternative title is specified ExhibitPlus will display this title in place of the filename on index and slide pages.

In the previous section about adding comments to images we saw that two files could be used - comments.properties and a filename named with the filename of the image, plus a .txt extension. Changing the titles works the same way, except this time a file called titles.properties is used instead. It functions exactly as the comments.properties file works. If you choose instead to use the second method with a .txt file named with the same name as your filename simply enter a "title=" line into this file. You may or may not combine this entry with a "comment=" line as well if you like.

If the exact way to do this isn't clear, please read the section above on adding comments to images - titles work in exactly the same way.

Including original images

Ensure 'link to originals via scaled images' is selectedIncluding original images

At the time when you generate your album you have to choice to decide whether you also make original images available for download. You should take a number of things into consideration when you make this choice:

If you do decide to include original images there are a number of advantages (which are covered in detail a little later):

Viewers can download the original image (if available) by clicking on the download icon Download original here

If you do wish to include original images, ensure that you click the "Link to originals via scaled images" radio button on the "Image linking" box in the "Main" tab in the JAlbum user interface.

You must also consider that linking just ensures that any generated HTML contains links to the original images themselves. You must also ensure that the original images are actually present in the output directories. You can copy them there yourself, but the easiest method is simply to ensure either the "Copy originals" or "Output to image directory" check boxes are ticked.

Full-screen mode

Normally, when a viewer clicks on the center of a slide image they are taken back to the index page. If original images have been included they will be taken into "full-screen mode" instead. In full-screen mode the original image will be displayed, except that the width is scaled to fit the browser window. This means for some images a small amount of vertical scrolling may be required.

The following diagrams demonstrate the navigation possibilities in various modes. Index1 is an example folder containing the images Slide1 and Slide2. Index... represents further folders containing other images.

When original images are not included, only the slide and index modes are available Original images not included

The display in full-screen mode looks a little different, in that the navigation buttons appear over the top of the image itself. For information about how to disable the buttons in this mode please refer to fullScreenButtons. In this mode it is also possible to start a slide show, and when the slide show starts the navigation buttons will not be displayed. They will return if the slide show is stopped, or if the end of the folder is reached. Keyboard shortcuts, if enabled, will still be available.

When original images are included, full-screen and zoom modes are also available Original images included

From full-screen mode it is possible to enter "zoom" mode. Once the viewer selects the zoom icon (or keyboard shortcut "z" or Page Down) from full-screen mode they see the unscaled original image. Depending on the native resolution of the image they will then have to make extensive use of the horizontal and vertical scroll bars (or arrow keys) to see various different parts of the image. No slide show function is available in zoom mode. To exit from zoom mode, simply click on the image itself, press the "z" key or use the "Page Up" key. Naturally the back button on the browser can always be used.

When jumpDirectFullscreen is enabled, the slide page is skipped altogether jumpDirectFullscreen is enabled

If you have an album which will always be viewed in full-screen mode you may wish to skip the slide stage altogether. You can do this by selecting "bypass slide mode" in the user interface, or enabling the jumpDirectFullscreen variable. In this mode clicking on an index thumbnail will take the viewer directly to full-screen mode. If the user navigates up to the previous level, they will find themselves at the index page again.


Clicking this button displays a list of available keyboard shortcuts Keyboard shortcut help

Navigation between the various modes can be performed via the use of keyboard shortcuts (if enabled), or by selecting the various navigation buttons. Different buttons and keyboard shortcuts have different effects depending on which screen (or mode) you are currently viewing. Please note that in slide mode, a viewer can see a small icon providing help for keyboard shortcuts. If the viewer clicks on this icon a small summary of the available keyboard shortcuts will be displayed.

Index mode

Slide mode

Displays technical information about the image Show EXIF data

Full-screen mode

Zoom mode

Intuitive keyboard shortcuts

In order to demonstrate the intuitive nature of the keyboard shortcuts, each keyboard shortcut will be separately listed here, and its use in various modes will also be detailed.

Ordering prints of images

Clicking this button sends the image to the shutterfly.com printing service Ordering prints

By default a small coloured icon will appear at the bottom right corner of slide images. This will allow your viewers to order prints of images from shutterfly.com. You can disable this via switching off "link images to shutterfly.com" on the ExhibitPlus tab or the variable shutterfly. Please note that if you wish to use this feature it is a very good idea to also include your original images with the album so that higher resolution prints will be possible.

Going further

This concludes the user guide. If you would like to dig further into the possibilities of this skin then you are encouraged to read the reference and advanced sections.

valid XHTML 1.0! valid CSS!