To search for a specific word or phrase:
1 – Press the Ctrl+F (Windows) or CMD+F (MAC) key combination. You will see a small search box pop up near the top of the screen.
2 – Type the word or phrase you wish to find in the search box. As you are typing, the first occurrence of that word or phrase will automatically be highlighted on the screen.
Clicking the words Previous or Next (or the up arrow or down arrow depending on the browser) will highlight the previous or next occurrence of the word or phrase on the page.
To search information about a particular field, enter a apostrophe followed by the first part of the name of that field,
for instance: 'Disable viewer

FancyBox skin user manual

Contents

Introduction

This user manual gives the required information to create albums with the FancyBox skin. It is not a manual for the viewers of the albums, the user interface of FancyBox albums has been described in a help file for the PC and in another help file for a mobile device.

The responsive and mobile-friendly FancyBox skin do give maximum attention to your photos, because they fill your screen with your photo, by adapting the image size to the screen size of your tablet or computer. However you can use it also to embed a light box in a webpage as you see in my note The story of the FancyBox skin.

The FancyBox skin can play local video files and with the jAlbums Web Locations it is also possible to play videos from the YouTube and Vimeo site.

To add a web location, open the web page you like to add in your browser and drag the site icon in front of the address of the web page into the jAlbum Explorer window at the place you like to see it in your album.
You can do it too by clicking the right mouse button in the Explorer window and selecting next 'New page' / 'Web location'. Next enter the URL of the website and click on the Update button. Here is an example of such a YouTube link: https://youtu.be/mzpurct7VZ0 click the update button after you entered this link, the link changes into https://www.youtube.com/watch?v=mzpurct7VZ0&feature=youtu.be . Make a screen picture of the video thumbnail and a enter that as Image URL. Next click the OK button. To get the YouTube video URL, you can also select 'Share' / 'Embed' and copy the src link to the link URL field.

With weblocations you can also display panorama pictures displayed in external viewers. Click here to see an example album.

The fancyBox library has native support for YouTube and Vimeo videos. Click here to see the FancyBox video test album. Notice the Vimeo URL should start with 'https://player.vimeo.com/' to avoid a "refused to display in a frame because it set 'x-frame-options' to 'sameorigin'" message in the F12 console. It is also possible to display videos from the Flicker site, but for the same reason the video link should start with 'https://embedr.flickr.com/'. You can also first download the corresponding mp4 file and process that file as a native video file.

The viewer has full control over the slide show via the settings button in the upper right corner of the index page. If you click that button a window opens where you can change the viewing time and the transition effect if slide shows have been enabled. You an choose there too to use full-screen for the slide page if it has been supported by the used device. Try it yourself here with the sample album!

Example of a full index page with music player and with a link to the parent form on an iPad:

Example index page on iPad

You see here an example of an index page with fixed-shape thumbnails and on top colored buttons for Help, Start slide show, Back to the parent page, Facebook Share album function, Mail Share album function and a button to edit settings which can be changed by the viewer.

Try it yourself by clicking this link.

On a PC you see also a full screen expansion button:

Example index page on PC

If you click that button, the whole screen will be opened for your album.

Notice here the favicon image entered in the Skins general settings tab.

F If you click the settings button, the viewer settings page opens:

Viewer settings

With 'Font size' you can enlarge or reduce the standard size of the letters used for the descriptions and with 'Button size' you can enlarge or reduce the size of the buttons. So the viewer can adapt the appearance of the album to the used device or to the strength of his/here eyes.

Close this window by clicking somewhere in the background of this window or click again the settings button.

These settings are saved in the local storage of the browser, so they are used again next time the album is opened and they are used for the other albums made with the same skin.

The buttons and image below the thumbnails on the index page are optional and can be defined by the album creator.

The album creator may also select colored buttons, black or white buttons and text buttons.

Default no file names are displayed below the thumbnails of the index page, but you can see the file name and picture description in the tool-tip if you move the mouse cursor over a thumbnail. On touch screens you see these tool-tips if you tap on a button or thumbnail; to prevent a click action you should move your finger over the screen outside the thumbnail en release there your finger from the screen. (if tool-tips are enabled by the album creator).

If you click on a thumbnail the picture is showed (enlarged in full screen mode if selected by the viewer):

Slide page

In this example the buttons have a transparency of 0%. It is also possible to hide the buttons on a slide page (always or show the buttons only in the pause state) and do the navigation via swipes or fast keys. The functions of the buttons are: Share by mail, Share by Facebook, Show location in Google Maps, Show Exif data, Open the optional link with more info about this photo, Back to the previous slide, Stop/Start slide show and Exit slide show to return to the index page.

If you click the Show Exif data button or the E-key on a PC the camera data are displayed below the slide description:

Exif data

Remove the Exif data by clicking somewhere in the Exif text or click again the Show Exif data button.

Album Settings - General

The layout and appearance of an album is tuned by the album creator in the jAlbum program via the Album / Settings menu:

Album Settings - General

The Album title will be displayed as Title on the index page. After a change of the pictures path, click first the OK button and change next the Album Title and or the Album description otherwise these data are lost.

You can use here HTML code, with or without using the jAlbum HTML editor, see the section How to use HTML code.

If the Album description is not empty, this description will be displayed below or above the pictures on the index page (depending on the contents of check-mark 'Show these links and the album description above the thumbnails on de skin 'Links' settings).

The Album tags are inserted in the meta keywords in the head section of the index html code.

Album Settings – Pages

The layout of the index page is determined by the Pages tab:

Album Settings – Pages

Normally if you saves your images in the camera in JPEG format, you check here the 'Link to scaled-down images only' check-mark, but if you like to offer the possibility to download your photo's in higher resolution, you should check 'Link to originals via scaled images'.

If Slide Page option 'Download button' is checked, a Download button will be added in right corner of the slide. If the user clicks on that button, he can download a copy of the slide image. To download the original image, select option 'Link to originals' or 'Link to originals via scaled images' and check-box 'Copy originals if needed'. The scaled down image used to display the slide is downloaded if 'Link to scaled down images' is selected.

If your camera saves the images in RAW format, which are processed in a RAW image photo editor like Adobe Lightroom, it is better to export your images as JPEG images to the jAlbum images directory and set option 'Link to originals' and set check-box 'Copy originals if needed'. This prevents that the image is converted twice with as result a loss in quality. Export the images in the resolution/size you normally select on the jAlbum Images settings page and don't forget to export also the metadata, because these are processed by jAlbum. For instance I normally select as image bounds for my slide images HD format, 1920x1080. So I use these settings for the export from Lightroom:

Lightroom export settings

However if you like to make images optimal for retina displays, you should select 3840x2160.

I do export first all images with Width and Weight W 1920 H 1080 and next all the Panoramic pictures again with only a Height H: 1080:

Lightroom panorama export settings

The 'Columns' and 'Rows' fields in the 'Thumbnails layout' group determines the layout of the index pages. The maximum number of thumbnails displayed on an index page is Columns*Rows. If there are more images as that number a 2nd and if required next index pages are generated. I strongly recommend not to do that. If you have a large number of images in an album, it is far better to subdivide your images in groups and save each group is folder, see here for an example. I recommend to make Rows 0 to prevent that a 2nd index page is generated.

You can fill the 'Link to homepage' block, this will generate a text button below the thumbnails on the index page.

Album Settings – Images

The size of the images generated by jAlbum is defined on the Images tab:

Album Settings – Images

Because the slides will fill the whole screen of the monitor / TV or tablet, you should select large dimensions for the images. I select mostly the HD TV resolution 1920x1080 and Quality 60. If you display pictures mostly on an iPad retina screen, you could select 2048 x 1536 or 2048x2048 if you have many pictures in portrait mode.

The use of SrcSets

With jAlbum 24 you can use SrcSets. It defines multiple sizes of the same image, allowing the browser to select the appropriate image source for the used device. See the jAlbum blog for more details. You see in the screen-shot of the jAlbum Images General tab above 5 variants selected, by selecting in the combo-box 'Faster and best quality'.
You can remove settings by selecting a setting and next clicking the '-'button. I always remove the Thumbnails variants, because these are useless I think.
Don't forget to set on the the jAlbum Images Advanced tab to set the Output format to 'JPEG' , for browsers not supporting the WEBP format.

If you open the srcsets sample album, you see in the captions below the thumbnails which images are generated and if you open a slide page, you see in the middle of the image which of these images is used on your device.
Notice that panoramic images (see below) are excluded from srcsets.
The default jAlbum Sample album is also made with srcsets.

FancyBox panel

If you hover on a panorama image thumbnail and choose More... and Edit and next open the FancyBox panel on the right, you can set the panorama image settings:

Panorama panel

If the album contains panorama pictures, an expand icon is automatically added to the slide pages toolbar if the 'Spherical panoramic image' or 'Cylindrical panoramic image' check-mark in the FancyBox panel is set and the 'Don't use Panorama Viewers' check-mark on the Skin settings – Slide page / Options is cleared.

By clicking on the expansion button the picture will be enlarged and you can scroll horizontally through the panorama by moving the mouse in the center of the picture, by using the scroll-wheel or on touch devices by moving the image with your finger. To see an album with cylindrical panoramic pictures, click here.

If you set the 'Spherical panoramic image' check-box the panorama will be displayed in the interactive Photo Sphere Viewer created by Jérémy Heleine. Click here to see an album made with spherical panoramic pictures. You should only do this if it is horizontally a 360° panorama. In the ideal case the panorama should vertically span an angular range of 180°, so in that case you have an aspect ratio of 2:1. Special 360° cameras, like the Ricoh Theta V, create these images exactly, see the first 3 panorama pictures in the example album. However if the panorama is made with a normal camera, where the images are stitched by a multi row stitching program like Autopano Pro (no longer for sale) or the Adobe Lightroom program, the aspect ratio may be larger, but in that case you can still use a panoramic viewer, as you can see in this panorama example album.

The new ‘360° image’ panel introduced in jAlbum 14.2 is not used in the FancyBox implementation of the Photo Sphere Viewer, but I recommend to set it because, if that check-mark is set, a spherical panorama image will be scaled down in the slides folder to the nearest power of 2, independent of the selected images bounds on the jAlbum Images / General tab. So a 28000x14000 image will be scaled down to 8193x4096, an image of 5376x2688 will be scaled down to 4096x2048 and an image of 2800x1400 is scaled down to 2048x1024. But this panel is only visible if the image w:h ratio is exactly 2:1.

Note 1: You can't display a spherical panorama locally; you will see a warning message if you try to do this. To prevent this use the embedded webserver on the 'Tools / Preferences/ General'panel'.
Note 2: The size of displayed images should not exceed 8MB, otherwise there is a change that nothing is displayed. So it is not recommended to use the jAlbum page option 'Link to originals' if the original size is > 8 MB.

If you set the 'Cylindrical panoramic image' check-box as is showed in the example, above a user variable maxImageWidth=50000 is automatically applied.

For a full 360° cylindrical panorama photo, you should also set the '360° panorama' check-box. In that case you can endless scroll through the expanded panorama as you can see in this example. It is also required to set this check-box if your images are exported from a RAW processor and 'Link to originals' is set (so do set in that case also the 'Cylindrical panoramic image' check-box).

It is not recommended to use jAlbums integrated browser if your album contains panoramic pictures, because the integrated browser can't handle large pictures. I recommend to select on the 'Tools / Preferences / General' panel in the 'Preview' group: External browser and check-mark 'Use embedded web server' set.

These panoramic pictures can be expanded by clicking the expand button above the slide image.

It is also possible to display a spherical panorama picture with the Marzipano viewer. The 'Cylindrical panoramic image' check-box is not used in that case.

If you hover on a folder thumbnail and choose More... and Edit and next open the FancyBox panel on the right you can enter in a folder album an URL for the 'More info' button and text and/or html code to be inserted after the buttons and before the Profile image:

Folder panel

You see here

Notice that if you define a relative link to a file outside the album three, the link may become invalid if you move the output tree to another location.

View the corresponding album by clicking this link.

Album Settings – Other panels, slide description and GPS data

I never used the jAlbum panel Effects and panel Videos is only important if your album contains also movies. I use the default settings with resolution Original video.

If you like to apply widgets, you should set your wishes on in panel Album Settings – Widgets. The current design in jAlbum is rather old fashioned, so I seldom use it. If you open an album with widgets, it shows a wide line at the bottom of the screen. This line hides sometimes important information, like the description of a slide. Hide in that case the widget by clicking the '-' sign at the right site of the widget line. It is impossible to do this on a small device like an iPhone (see this thread), so that is another reason not to use it.

The Album Settings – Advanced - General panel, is important if you display pictures in subdirectories. In that case you should read my note: How to process pictures in subdirectories in jAlbum with the FancyBox skin.

Album Settings – Advanced - Metadata

Album Settings – Advanced - Metadata

You should select here check-marks 'EXIF Image Desc.' and 'Include photographic data in generated pages' to add descriptions to slides and GPS data to identify the location of the picture. In jAlbum version 14 it is also required to set the xmp check-mark, otherwise special characters like é and © are not correctly displayed.

If you use Face Recognition software like TAGTHATPHOTO which stores the person names in keywords, you should select both the xmp and the IPTC Caption comment source and select the Keywords option for a thumbnail tooltip and / or for the slide description.

I add slide descriptions and GPS location data with my EditPhotoInfo program or with the Adobe Lightroom program.

You can also add this with other programs like Lightroom: enter there the slide description in the Metadata group field Caption. The information entered in field Title is showed in the browser tab field. GPS data can be added in Lightroom module Map.

For a Video you can add a GPS location manually or with a GPS tool as has been described for the Slide page / Options tab.

Finally you can enter the slide description in jAlbum: select Explore, click Caption and select the image where you like to enter the slide description. However this works only if you check in the jAlbum Metadata settings check-mark 'jAlbum (Text file)'.

On the Album Settings – Advanced - Naming panel you should set the 'URL-encode links' check-mark to avoid html compliance problems.

If you like to use fancy borders around the thumbnails and or slides, you can use the Album Settings – Advanced - User Variables panel, to enter eXtended Border filters, like you see here. The use of these filters has been described in this note. Don't forget to set all border widths to 0 if you use that. However most effects can be made easier with CSS via settings in the skin pages.

Skin settings – General

The Skin settings are distributed over a number of pages.

Some of these pages contain text fields for links to other files or web pages on the Internet. You can load these pages with absolute URLs like http://www.andrewolff.nl/FotoSerie/fotoindex.htm but it most times also possible to use relative links with respect to the albums output directory, so links like ../fotoindex.htm . You can do that with the 'Browse for file' buttons behind these link fields. This is only possible if the album has been created. So to use these buttons, create first the album, next fill the link fields and click again on the jAlbum 'Make' button. These relative links do work only correctly if the structure of the folders on the PC is equal to the structure of the folders on the server and you select a folder in this structure.

With the FancyBox skin you see:

FancyBox - General

The General panel contains settings which are applicable both to the index page and to the slide page.

You can display a slide show embedded in your web page with an iframe and you can start the slide show from a link on your web page. If you like to use the slide show embedded, you should set check-box 'Open first slide automatically'. Normally this check-mark is not set and the slide show starts in the pause state if a slide page is not opened from the index page, but for instance from a Google Earth or Google Maps link. Click here to see a description of these techniques and here to see an example. Don't forget to select a transparent background color if you make an embedded album!

If that check-mark is set, the index page is skipped if you open the album. If the Close button is not hidden, clicking the Close button will also skip the index page; instead it opens the link defined at the top of the Links tab.

You can do the same without the use of an iframe, see here for an example and the recipe. For such a web-page you should set check-marks 'Open first slide automatically' and 'Use fancybox-placeholder'.

If you set this check-mark with the FancyBox skin and the Slide show is enabled, the slide show starts only automatically if check-mark 'Use 'Tap image' to start/stop Slide Show or for next image' on the Slide Page / Options tab is cleared. So check that check-mark if you don't like an auto start.

Notice that you should not check this check-mark if the album contains folder albums, because in that case you can't click on the links to the folder albums!

If check-mark 'Disable Viewer Settings' is set, the default settings cannot be changed by the viewer. It is recommended to set that check-mark for embedded albums to prevent that other settings as the selected defaults for the album are applied.

If you like, you can display the jAlbum widgets at the bottom of the index page to share your album with others or to collect comment to your album. To uses widgets, you have first to select check-mark 'Allow widgets' here and next select what you like to see in a widget in panel Album Settings – Widgets.

Option 'This is an album of albums' requires jAlbum version 14 where the 'Web location' object was added. If set, clicking a thumbnail of a web location on the index page will open the corresponding web-page directly, so the corresponding slide page is skipped, You can use this to make a master album like my FancyBox sample album. Return to the parent album of albums by clicking the up arrow button on top of the child album, to implement this see the Parent page URL field. If the target album/site shown no special return button, you should use the browser return button in the upper left corner of the browser window on a PC. If option 'This is an album of albums' is not set, clicking a thumbnail will open the slide image which corresponds with the web location.

To add a web location, open the web page you like to add in your browser and drag the site icon in front of the address of the web page into the jAlbum explorer window at the place you like to see it in your album. You can do it too by clicking the right mouse button in the Explorer window and selecting next 'New page' / 'Web location'. Next enter the URL of the website and click on the Update button.

Note: It is not recommended to show in an 'album of albums' normal images and weblocations, however if you do so, the weblocations should be the last images in the album, all 'normal' images should precede the weblocations. The panorama viewers do not show next and previous image buttons in an 'album of albums' and navigation buttons in normal slides do skip the weblocations.

If you set the 'Hide menu bar' check-box, the menu bar is hidden. Normally you should keep this check-mark cleared, but you can set if you like to select a template page like the About.htt page via a button or a special menu system as you see for example here. All horizontal menu bars in this example do use the CSS code of the standard FancyBox menu bar, so the appearance is also determined by the menu bar settings on the Skin settings - General tab.

If check-mark 'Use Bootstrap to create menu with background color:' is set, the menu is made with the Bootstrap library. The background color of that menu is determined by the next color selector. See my Greece Islands album for an example of this type of menu. The Bootstrap menu is only available for the FancyBox skin.

The combo-box after 'Menu alignment' defines the alignment of a menu. Select here 'Left', if the drop-down menu of the most right menu item contains wide strings, see as example of such an album my Algarve album.

If check-mark 'Replace menu bar by Hamburger button' is cleared, the Hamburger button will never be displayed and if set and the next width field is empty, the Hamburger button will always be displayed. If check-mark 'Replace menu bar by Hamburger button' is set and a width is entered in the next field, the menu will be replaced by a Hamburger button at the indicated view-port width. With the next color selectors you can choose the appearance of the menu and/or buttons tool bar. Click here for an example of a menu bar. With check-mark 'Draw border around menu and/or tool bar item' it is possible to show borders as you can see in this example album. However this is not applicable on a Bootstrap menu.

With a Bootstrap menu, the same colors as used in the Bootstrap menu are used for the Back buttons, in the About and other template files and for the buttons defined in the links tab if no icons are used and buttons are not displayed in a tool-bar.

If you set check-mark: 'Use the full size of the screen from edge to edge on an iPhone X(R/S/Max)', the slide image uses the whole area of the iPhone, but the notch may hide a part of the image. More info here.

If you set check-mark 'Disable Right Click and Long Tap context menu, to prevent 'Save as..'' all context menus with items like 'Save picture as ...' and 'View source' are disabled, to make it difficult for a viewer to copy your images.

The size of the font used for the album and slide page description and other text is set in the 'Font-size' selection box. I use normally fonts in the range 16-20 pixels to make the text also readable on a small device like the iPhone.

The Album title size is defined by the 'Album title font-size' selection box. Only applicable if the title displayed is above the theme image or if there is no theme image. If the title is displayed in the theme image, the size is determined on the Index page / Theme image tab,

The size of the text on a button, which defines also the size of the button, is defined after 'Button font-size'. Use a font-size of 20 or more pixels if you like to display your album on a small device like the iPhone.

Selection box 'Thumbnails text font-size' defines the size of the text below or in the thumbnails on the index page.

Check check-mark 'Use for the album title Google font:' to use a Google font for the album title. Chose the font you like to use on the Google Fonts page. Copy the name of the selected font to the text-box after the check-mark to use the default style. You can also use a particular style if you indicate that by a thickness and possible Italic parameter after a ':' character. For instance this album uses for the album title Google Font 'Lato:100i' (Lato Thin 100 Italic) and for the other text 'Quicksand:300' (Quicksand Light 300). Click on the '+' button ('Select this font') to see the correct parameters, but don't use a possible '+' character in the name.

For examples see the FancyBox sample album and the albums indicated on that page.

It is also possible to select a normal font for the album title and show available normal fonts by clicking the Font examples link.

With the next check-marks you can also select a Google font for the other texts or use there a normal font.

It is also possible to use Web fonts, this has been described on the jAlbum forum.

Five color fields define the color of the background, the text, the title and the hyper-links text and mouse over color of all pages. For embedded albums it is advised to select a transparent background color; to do that select on the color selector the HSL tab and shift the Transparency slider until transparency 100 is displayed. The system displays 2 squares in the color field if a transparent color has been selected. If you like to copy the used Color Code, select the RGB tab on the color selector and copy the contents of the Color Code field.

The next 2 fields define the optional shadow used around images and controls on the index page. I use mostly a transparency of 60%. See this album for an example of a shadow effect.

Both skins contains 5 predefined styles: Black, Custom, Gray, Gray-Textile and White. Use style Custom if you like to define your own colors and/or background image. To change the background image, click on the 'Select button' to select another image for a background and set the 'Auto-size background image with a large background image or set the 'Repeat background image' if you use a small background image. Set check-mark 'Don't scroll background image' if you the background should not scroll. With the combo box after 'Buttons:' you can select the buttons you like to use in your album. You can choose one of the next 5 sets of buttons:

The last group Special buttons contain now round black buttons on a white background which a saved in the skin directory res_Special. If you like to define your own buttons, you should replace the buttons in directory res_Special by svg images of your choice. You should use the same names and make a copy of this directory elsewhere, because the contents of this directory is overwritten if you install a new version.

This is also possible by another way: create in the image directory of your album a directory named 'res' and save there your own buttons using the same names. With this solution you can install a new skin version without problems.

For an album with a dark background, I recommend the set 'White buttons on a transparent background' and for a light background I recommend there the set 'Black buttons on a transparent background'. The next field defines the transparency of the buttons used for navigation, help, settings and user links. The default value for the Transparency is 0%, but you can change this to see the slide partly through the buttons, for an example click here. If you move the mouse over a button, the transparency is temporarily removed. Check-mark 'Use tool-tips with:' allows you to select tool-tips for the thumbnails and the buttons on PCs and on touch screen devices. The next two color selectors makes it possible to choose the text and background color of these tool-tips. You see these tool-tips on a PC if you move the mouse over a button or thumbnail. On touch screens you see these tool-tips if you tap on a button or thumbnail; to prevent a click action you should move your finger over the screen outside the button or thumbnail en release there your finger from the screen.

Skin settings – Web page

Skin settings – Web page

The controls on this tab are used to customize an album with non standard features via extra code.

The contents of the title tag in the head section of the web-page is default filled with the Album title. If that is OK, keep the next field 'Web page title' field empty. However this may not be desired for embedded albums, so in that case you enter here the text for the title tag.

In the next multi-line text box, you can enter optional html code to be inserted in the <head> </head> section of the index file of the main album and the used template files. If check-box 'Insert this code only in the main (top) index' is cleared, this code is also inserted in the folder index files of the album. In the example above you see the code required to initialize the Google Translate function in all files of the album.

In the next text box you can enter your own css code, for instance for the lay-out an extra info window. You see here the code used for the logo button in the menu in this sample album.

In the next multi-line text box, you can enter optional javascript code to be inserted into method $(document).ready(function(). With check-box 'Insert this code only in the main (top) index page' you indicates whether this code should be inserted in the main index page or also in the folder index pages. In this example you see the code to change the styling of a the Google Translate combo-box in the menu of this sample album.

Standard for every album is a res folder generated for the resources like the buttons and the CSS files, but the FancyBox skin allows you to use one central resources folder for all your albums. To do this fill the 'Fixed res path' field with the URL of the central resources folder. It is possible to use a relative path like ../../res for the fixed resources folder; this path is relative with respect to the index file folder. Construct such a path by clicking on the 'Browse for directory' button, after you created the central res folder. Only relative file paths are valid.

The standard jAlbum res folder is automatically deleted if a fixed res folder is used, so to fill the central resources folder, make first an album without a fixed res folder and copy the contents of the res folder to the central resources folder. Next fill the 'Fixed res path' field with the URL of the central resources folder and generate the album again. You can also upload the first album created without a fixed res folder and use the uploaded res folder as central resources folder for the next albums. If you use the Fixed Res path and you like to play a different MP3 file for each folder, you should enter a fixed URL on the 'Music' tab. Setting check-mark 'Keep the common.css file locally' allows you for example to use another background image as used in the global res directory (only used if the 'Fixed res path' is not empty).

In the Favicon image text box you may enter an URL of your favicon icon, which is showed in the browser tabs in most browsers or select a relative path with the 'Browse for favicon icon' button. If you leave this field empty, the green jAlbum frog will be showed in the tabs for albums hosted on the jAlbum server.

By entering module names in the next text box, it is possible to add extra js code modules at the end of the index page. The js-modules are separated by a comma. Load these modules in the res folder in the image directory. In this example you see how the stylinggt.js module for styling a Google Translate combo-box is added.

Option 'Use secure links' should be set if your album is uploaded to a secure site (starting with 'https:') like the jalbum.net server.

Skin settings – Index page

The settings for the index page are distributed over six tabs:

However the Links tab defines the links which are displayed on the index page.

Skin settings – Index page / General

Skin settings – Index page / General

There are four options to show the top row of buttons above the theme image:

If you select Show initially or Hide initially, the buttons can be hided / showed by clicking in the theme image, or if no theme image is used, on the album title. The last type of selected display is remembered and used in the next index page.

If you always like to hide the help and settings button, check the check-mark 'Disable viewer settings' on the Skin settings – General tab and check-mark 'Show only a help button in the viewer settings window' in this group.

There are three ways to show the album or folder title:

You can also edit the theme image and draw the title in the image, in which case you should select option 'Hide album title'. See here for an example of such an album.

If check-mark 'Show shadow in title above the theme image' has been set, the title text gets a shadow if the title displayed is above the theme image or if there is no theme image.

Check-mark 'Use as background color for the album title:' and the next color selector allows you to give the album title a background color to make it better readable in case a background image is used for the index page.

Check-mark 'Use as background color for the album description:' and the next color selector allows you to give the album description a background color to make it better readable in case a background image is used for the index page. If the next check-mark 'Fill box around the description' is cleared, the background color area is minimal, just around the text. This works only if no html tags (except <br>) are used.
Set the next check-mark 'Fill box around the description' if you like a to use a larger background color area or if the html-editor is used for the album description and you like to use the selected background color for the album description.

The contents of number box 'Album description box width:' defines the area used to display the album description, This can be an absolute width in pixels or a relative width in % of the window width.

Check-box 'Use left-aligned text (recommended for HTML editor)' is usefully if you use the HTML editor for the description: The jAlbum HTML editor implemented assumes that the default alignment of text is left-aligned, but the default alignment in the skin is center-aligned. See section How to use HTML code if you like to use HTML code. As a result, text entered in the HTML editor is shown left-aligned in the HTML editor window, but after you made the album with the new entered text, you see the new text as center-aligned.
You can prevent that by checking this check-mark or by clicking the left-align button in the HTML editor if you start with a new text.

If you set check-mark 'Show shadows on the index page', a shadow defined by the two shadow fields on the General tab will be displayed around the thumbnails, around the theme images and around a buttons-tool-bar (if used).

The group boxes 'Show below or in thumbnail' and 'Show in thumbnail tip' determines possible text for the thumbnails: File name, Title, Comment and only for the FancyBox skin the Exposure date of an image or recording data of an video.
Default no text is displayed below the thumbnails of the index page, but you can see the file name and picture description in the tool-tip if you move the mouse cursor over a thumbnail or on touch screens you see these tool-tips if you tap on a thumbnail if check-mark 'Enable tool-tip with:' on the General tab is set. It is recommended to show no text below the thumbnails, however if you check the 'Show file names under thumbnails' and/or 'Show descriptions under thumbnails' check-mark, the file names and/or descriptions will be displayed below the thumbnails.
With the FancyBox skin you can also show the keywords in a thumbnail hint.

We recommend to show image descriptions only on the slide page, because there is more space available for long text. However if you use a search text-box, it is recommended to check also options 'Comment and Keywords in the 'Show in thumbnail tooltip' group. To enter a link in an image description, you could this code: [link text](link URL), but with version 22 or later version, it is better to use the html editor to create a link, so this possibility will be removed in a next version, so this possibility will be removed in a next version.

The thumbnail tooltip is saved in the title attribute of a thumbnail image. For an efficient search function, the alt attribute text for a thumbnail is made equal to the title attribute text, except if a Justified Gallery caption is requested but not available; in which case the alt attribute is empty.
If user variable 'alt' is defined, the contents of that variable is used as alt attribute in a thumbnail instead of the title attribute.

With the next 'Allows swipes' combo-box and text box for the mobile device height, it is possible to disable swipes on the index page or allow swipes only on the theme image if the screen width is below a certain value or always if the screen width field is empty. This makes it easier to scroll the index page and use tool-tips on touch screens. I normally restrict swipes on the index page to the theme image, so that it is easier to scroll a page up or down on a touch screen and tool-tips can be used. To prevent that the index page is closed if you scroll through the thumbnails too fast, clear check-mark 'Enable vertical swipes on the index page'.

Next two buttons "Left / Right page margins: " control the index page margins.

If check-mark 'Show shadows of panels on the index page' has been set all panels on the index page do get a shadow. If check-boxes 'Use as background color for the album description' and check-box 'Fill box around the description' and check-box 'Show shadows on index page' have been checked, the Album description panel shows also a shadow.

If check-mark 'Show Share window button' is set, the index page shows a Share button to open a modal window with maximal 5 share buttons for WhatsApp, Facebook, Twitter, Pinterest or Email (WhatsApp only on mobile phones):

Share

If a viewer clicks the mail-button his mail program will be opened to send the email.

You can define default values for the Addressee, the Subject and the email body text in the 3 text-fields in the 'Email contents' group. The first line of the email body text contains the URL of the album.

You can use this for two purposes:

To share the album or slide page. Leave in that case the Addressee field empty.
To sell a photo or the goods on the photo or to collect comment on your photo. Fill in that case your email address in the Addressee field.

Skin settings – Index page / Theme image

Skin settings – Index page / Theme image

The first group 'Album title in theme image' defines the appearance and position of the title in the theme image.

With the 'Font-size' combo-box you select the size of the title in the theme image. You can use absolute pixel units, recommended for theme images used as background or relative ‰ units recommended for responsive theme images. If you use relative units, the font-size is a ‰ of the view port width, so the title shrinks if the view port shrinks. To see the effect, open this test album on an mobile device and rotate the device or open it on a PC and change the window size.

If you let jAlbum write the album title in the theme image, the title may be unreadable if the Album title text color does not differ much with the colors of your theme image. Select in that case another color with the 'Color' selector on or put the title above the theme image with the 'Show album title' options on the Index page / General tab.

To improve the readability of the title in the theme image, you can also set check-mark 'Reverse title color based on Background color'. See here an example of an album with folders where th ia is used.

Another way to improve the readability of the title in the theme image, is to add a shadow to the title by checking check-mark 'Show shadow in title'. Select the shadow color with the next color selector 'with shadow color'.

The 'Title vertical position' box allows you to shift the vertical position of the top of the Title in the theme image. With combo-box 'Horizontal alignment:' you position the title centered, left or right in the theme image.

Checking the check-box 'Move title above theme image if view-port width <' makes it possible to prevent that the title in the theme image is unreadable in small view-ports. Notice that in that case the title font-size, the color and the shadow is defined on the General tab and the Index page / General tab

The second group 'Theme image source' defines the appearance and position of the title in the theme image. The are 4 ways to generate a theme image

  1. In the Theme Image field you can enter the name of the theme image in the output folder to be displayed at the top of the index page, but you can also browse to the theme image by clicking the browse button to the right of this field. If this theme image is not used as background image, it is never displayed with a width larger as the natural width of the theme image. This enables you to use theme images of different sizes in folder albums. See here for an example of such an album. These theme images are not cropped, the whole image is showed, so the size of the theme image in the various folders may be differently.
    Leave this field empty if no theme image is used. Note that you have to make the album first before you can use the browse button. If you use an image in the output folder, you have to copy your theme image to the output folder, that is not done by jAlbum.
  2. Via an include file page-header_2.inc, however you should no longer use this method if you use jAlbum V15 or later version.
  3. Via the Theme Image on the Folder panel. To use this, set check-mark ‘If this field is blank or the Theme image is not found, use the Theme Image on the Folder panel'. If ‘Create Theme image ...’ check-mark is cleared, the corresponding image in the slides folder is used. The size of the theme image in the various folders may be differently. Use this method if you like to use your best photo in that (folder-) album without cropping that photo.
    If a folder album has no slides directory or if the selected theme image does not come from the slides directory, this method does not work. Use in that case method 1. It will also not work the first time if you start with an empty slides folder, because the slide is not yet created if this is checked; click in that case 'Make' again and you will see the theme image in the album. See here for an example of such an album
  4. If you use the Folder panel and check-mark ‘Create Theme image ...’ check-mark is set, a theme image folderimage.jpg is created in the output folder. See here for an example of such an album. These theme images are all cropped to the same size, so the size of the theme image in the various folders are all equal,. You can define both a width and a height for the created theme image via the 'Set cropping...' context menu entry which you see if you click with the right mouse button in the selected Theme image:
Set cropping

If method 1 is used, methods 3 and 4 are ignored and if method 3 or 4 is used, the use of include file page-header_2.inc is excluded.

You can display the theme image as a background image with a constant height or as a responsive image which adapts his size to the size of the window. On large displays there is not much difference between the two methods (Click here to open an album with a theme image used as background image and click here to open an album with a theme image used as responsive image), but on small devices like an iPhone the difference is significant as you can see in the next screen-dumps.

Theme image iPad
Theme image iPhone
Responsiveheme image iPhone

The first two screen dumps show a theme image used as background image on an iPhone.
The next two screen dumps show the same theme image used as responsive image, but with a font-size in pixels. You see that long titles are sometimes not showed correctly on small devices like an iPhone in portrait mode. Set in that case the check-box 'Move title above theme image if view-port width< 500px'.
The last two screen dumps show the same theme image used as responsive image, but with a relative font-size in ‰, you see that the title shrinks if the window shrinks..

You can display the theme image as a background image with a constant height and a width almost equal to the window width. To select this, set check-mark ‘Use Theme image as background ..’ and enter the required height in the next text-box. If theme image folderimage.jpg is created, you can leave this field empty: the height is copied from the theme image height field of the 'Set cropping' window. However you can still enter a height smaller as the cropping height is you want a smaller background theme image.

If check-mark 'Fixed theme image' is set, the theme image is fixed at the top of the window; the thumbnails will scroll over the theme image. You can see this effect in this demo album

If check-mark ‘Use Theme image as background ..’ is cleared, the theme image is displayed as a normal image, with the properties set in the next 'Responsive theme image properties' group.

In field 'Theme image width' you enter the display width of the theme image. We recommend to use a width in %, so that the theme image is scaled if the window size is changed. This makes also the album responsive, the width is adapted to the screen width, so the album looks the same on an iPhone and on a big monitor. However, the width of the theme image is never larger then the natural width of the theme image.
I use always 96%. If you apply shadows around the theme image, you should always 96%, otherwise you see a ghost shadow. If you enter a value like 600px, the width is fixed and the size of the image is not changed if the window size changes.

If you enter the size in %, you can limit the size of the theme image on large screens by entering a maximum size in pixels in the next field 'Max-width'.

With the next 4 fields you can design a border around the theme image. With a 'Space to border' value > 0, you will see the background color or page background image between the border and the theme image (or thumbnails).

I use mostly wide panoramic theme images so that there is sufficient room for the normal thumbnails on a small device. I use the theme image in that case as swipe area (see 'Allows swipes' field above).

The note 'How to implement albums with a theme image with the FancyBox skin' describes the whole procedure and gives an example of a theme image that is processed in a photo edit program like Photoshop Elements, where we cropped the image and added text in the image.

The last group 'Theme image icon' makes it possible to show an icon or logo image on top of the theme image. This is only possible with the FancyBox skin. To use this, you should select the image to be used in the 'File' field. You can use jpeg-, png-, gif- and svg-files as logo or icon. Enter an explaining text in the 'tool-tip' field.

You can connect a link to this image if you enter the link in the 'URL' field. If you do this, the theme image icon will only be displayed in case of a valid link. As an example open this folder album and select the Vila Nova sub-album, you see there the Info icon. But in the next sub-album Porte Covo, you see no Info icon, because the info page MoreInfo.html is missing in the corresponding sub-directory. The position of the icon in the theme image is defined by the fields 'Left', the distance in % from the left side of the index page and 'Top', the distance to the top of the theme image. To allow you to use this icon as a logo, the size of the icon is differently from a normal link icon, it is determined by the contents of the field 'Width'. The natural width of the icon should be equal or larger than the contents of that field. If the Theme image is not used as background and the Theme image width is defined as %, the Theme image top and width fields contains ‰ units else pixel units. In this album with a theme image as background image (see the settings above), you see such an icon in the upper left corner, in this folder album you see such an icon in the middle and in this album you see the icon in the lower right corner of the theme image. The last two albums show the theme image as a responsive image.

If you like to see the icon only on the top level index page, set check-box 'No icons in folder albums'.

Skin settings – Index page / Thumbnails

If the Justified gallery is selected you see:

FancyBox Justified gallery

If the Masonry gallery is selected you see:

FancyBox Masonry gallery

The FancyBox skins supports the ‘Justified Gallery’, the 'Masonry Gallery' or a Variable # thumbnails / row (Check-boxes 'Use Justified Gallery' and 'Use Masonry Gallery' both cleared).

With option ‘Justified Gallery’ the number of thumbnails on a row will be reduced if the screen width is reduced, but all thumbnails on a row do get the same height and all rows except mostly the last row will get the same length, see here for an example (the parameters used in this FancyBox album are displayed in the screen dump above). Details of the Justified Gallery parameters are documented in the Justified Gallery documentation.
The ‘Row height’ defines the average height of a row. Parameter 'Max. row height' (in %) is used to calculate the maximum row height. If you select 100%, all rows will get the same height, but images can be cropped. Select a higher value to prevent that.
This gallery type is well suited if the width of your images varies a lot, for instance if you display also wide panoramic pictures. I use mostly non-fixed shape wide thumbnails, for instance 400x80 where the ‘Row height’ is equal to the selected thumbnails height, 80 in this example.

The ‘Margins’ defines the gap between the thumbnails. The color of these gaps is defined by the ‘Background color’ (FancyBox: ‘Gallery background color')'. The default color is transparent, in which case the color of the gaps is equal to the index page color.
The 'Border' defines the outer border of the gallery, if the value is -1 the outer border will be made equal to the Margins. We recommend to use the value 20 to prevent the 'jump content' problem. To avoid this problem, it is advised to use a transparent 'Gallery background color' and a border of 20.

If you select in 'Show below or in thumbnail' on the Index / General tab the option 'Comment', you will see the caption of the image in the thumbnail if you move the mouse cursor over the thumbnail. Select with 'Caption transparency' the type of caption you like to see if the mouse is not over the thumbnail. Select a value < 80 % if you wish to see the captions on mobile devices.

The ‘Last row’ parameter defines the layout of the last row. If you select ‘Justify’ the length of the last row will be made equal to the length of the other rows, but the row height can considerable be enlarged if the last row contains only 3 or less thumbnails. I prefer mostly ‘Center aligned’, in which case the height of the last row is equal to the height of the other rows.

If you like to draw borders around the thumbnails of a Justified Gallery, you should select as 'Thumbnail border width' a number unequal to 0. The color selected in field 'Thumbnail border color' will be used for the border.

Next you see check-mark 'Use as row height: ' followed by '% of the screen-height (minimum: 50px, maximum: maximum thumbnail height)'. If this is selected, the 'Row height' field is disabled. The maximum row height is determined by the height value in the jAlbum settings tab 'Images / General' field 'Images bounds / Thumbnails'. Compare the display of the thumbnails of this album on a large monitor and a mobile phone to see the effect. With the FancyBox skin, these settings are also used with the Mansonry gallery in a slightly different way, therefore the text is there 'Use as relative size'.

These two controls are also used for the thumbnail height of a Masonry-Gallery or for a Grid-Galery (both check-marks 'Use Justified Gallery' and 'Use Masonry Gallery' cleared). It is recommended to use this if you have large thumbnails and still like to show these on small devices like smart phones. But remember the size of a thumbnails can never be larger as the maximum size set in Album Settings – Images field 'Images bounds / Thumbnails'.

With a Masonry-layout, the thumbnails are displayed in a number of columns, where the position in a column is based on the available vertical space. For examples see this album of framed pictures (the used parameters are displayed in the FancyBox screen dump above) and this flat album. It is adviced to use the Masonry-layout only if you have 7 images or more, because the thumbnails are not centered if you see only one row of images.

Field 'Desired # Masonry gallery columns' defines the number columns to be used in a Masonry gallery. This number applies only to large screens / view-ports, the number of columns drops automatically for small screens and small view-ports. The gap between columns is defined by field 'Thumbnails horizontal margins'. Field 'Thumbnails vertical margins' can be used to fine tune the vertical space between thumbnails in a column.

If check-mark 'Use as relative size' is checked, the thumbnails width and the column width is reduced if the window width (view-port width) is reduced or if smaller screens are used like a smart phone. It is recommended to set this check-mark for responsive albums which should be displayed on both large and small screens. Notice that the thumbnail width is never larger as the thumbnails width defined in the Image bounds on the jAlbum Images / General settings tab.

You have to play a little with the various settings to get the Masonry layout you like!

If with the FancyBox skin neither the Justified Gallery nor the Masonry Gallery is used, it is possible to select the vertical alignment of the thumbnails with the combo-box 'Thumbnails vertical alignment'.

For more information and examples read this note.

If you check the check-mark 'Fixed-shape thumbnails', all thumbnails do get the same size as defined in the jAlbum settings – Images panel in field Image bounds /Thumbnails.

If option 'Compress panorama thumbnails' is checked, the width/height ratio of a panorama photo thumbnail is limited to 2.2, so part of the left and right side is omitted.

With 'Thumbnail hover scale factor' combo-box it is possible to enlarge a thumbnail automatically a bit if you move the mouse above a thumbnail.

Panel 'If Justified Gallery is not used' defines the parameters which are only used in the last 3 type of galleries, or with FancyBox in case the Justified gallery is not used, so with the Masonry gallery or a Variable # thumbnails gallery.

If you set check mark 'Superimpose video camera icon onto video thumbnails' a small camera icon will be shown in the upper right corner of a video thumbnail.
If you set this check mark, you should clear the corresponding check mark on the jAlbum Images / Advanced tab. The jAlbum overlay icon is too large for small icons like 120x80 which I normally use.
Note: if you set or clear check mark 'Superimpose play icon onto video thumbnails' on the jAlbum Images / Advanced tab, a 'Force Remake' is required to see an effect!

The distance between thumbnails is defined by the fields 'Thumbnails horizontal margins' and 'Thumbnails vertical margins'. If you like to get no or a very small distance between the thumbnails you should enter a negative number (-2,-4), the value depends also on the border width. If you apply a shadow effect, the value should exceed the shadow width defined on the General tab.

If you like rounded corners, enter a value > 0 in 'Thumbnails radius'.

You can insert space between the border and the image by entering a value > 0 in field 'Thumbnails space to border'.

You can put a border around the thumbnails by entering the width in field 'Thumbnails border width'; the color of the border is defined after 'Image thumbnail border color' a thumbnail of a video and of a folder gets his own border color, except for a Justified Gallery, where this is only applied for thumbnails on the slide page.

Skin settings – Index page / Folders

Skin settings – Index page / Folders

If the album contains folders and you set check-mark 'Show links to folders in the menu bar', the links to the folders will (also) be displayed at the top of the index page. Click here for an example. Because a menu bar with links to folders can take a lot of space on a small device like an iPhone, you can hide the folders in the menu bar by entering a minimum screen height after 'if screen height > '. For each folder album you can display a thumbnail if you set check-box 'Show folder icons'. If you use already a folder menu at the top of the index page, you may decide to clear this check-box.

With the next two multi-line text boxes, you can enter optional html code to be inserted at the start of the menu or appended at the end of the menu. The code you see above implements the extra items in this sample album: a logo and a translate combo box to translate the text in another language. You can also use it to add a search box as you see in this album.

The next 'Folder icons' group define the display of thumbnails which are links to folder albums. This is a box with a folder thumbnail (indicated by a read heart in the folder) or a folder image with the folder title below this image, see this example.

The box width and/or height for a folder image and its title can be set by the user by entering a value in field 'Folder box width' and 'Height' fields. In most cases you should leave these fields empty: the box size corresponds in that case as close as possible to the folder image size.

Finally there are three check marks to show/hide the title text, the comment text and the thumbnail on a folder tile.

With the FancyBox skin it is possible to use different properties for the slide thumbnails and the folder thumbnails. You see there 7 extra fields for the folder thumbnails:

It is possible to select the vertical alignment of the folder thumbnails with the combo-box 'Folder thumbnails vertical alignment', but you see this only if no fixed-shape thumbnails are used and the Folder box height is undefined (empty).

By checking the 'Fixed-shape folder thumbnails' check-box, it is possible to use fixed-shape folder thumbnails, with the size defined in the next two fields. It is recommended to define no size which is much larger as the thumbnails Image bounds defined on the Album Settings – Images tab, because no new thumbnails of that size are created.

Skin settings – Index page / Info window

Skin settings – Index page / Info window

You can display a modal Info window, see this sample album for an example.

You can use an image to open the extra page. Field 'Info window button image' should in that case show the name of the image selected via the Select button. You should select an image with a dimension of about 50x50 pixels. This icon will be displayed between the other buttons defined lower, between links 5 and 6. The text in the next field 'Info window button text or hint' is used as hint message. If the 'Info window button image' is empty, you will see a button with the text given in field 'Info window button text or hint'. You should fill at least one of these two fields, otherwise you will see not button or icon to click on. In this sample album it is the 2nd button from the right.

The next group "Next settings are used both for the 'Info Window' and the 'Slide page - More info' new window" contains common settings for the 'Info Window' and the 'Slide page - More info' window:
With the two color fields, you select the background and text color for these windows. If check-mark 'Show print button' is set a Print button will be showed, to print the text in the window. For an example see the 'More info''windows in this album (click on the 'Recept >>' link).
With the next width and height fields you define the size of the window. You can select a relative dimension (%) or an absolute dimension (px). To avoid a vertical scroll bar, it recommended to select % for the width and px for the height.

If you set check-mark 'Show info window if you open the album' this window is showed if you open the album, see here for an example. However you should not set this check-mark in case the album contains sub-albums in folders, because in that case you see the info window again if you return to the parent page from a sub-album.

If you like to give the Info window a title, enter the title in the 'Info window title' text-box. Leave it empty if no title is required.

In 'The text / html code for the Info window' you enter the contents of the extra info window. If this text field contains no <p> or <br> or any other html-tag, the line-feeds will automatically be replaced by html new-line tags (<br>).
If you enter here html code (see also what has been said for How to use HTML code), you can enter the required css code in the css block of the Skin settings - Web page tab. You see there the css code used for this sample album.

You can also use a pdf-file as info window. See here for an example, click on the PDF-file menu item to open a info window made with a pdf-file.

You make such an info window as follows:

Put the pdf-file (indicated below as your_pdf_file.pdf) in the output directory. Open the Index page / Info window tab and set the window width to 90% and the height to 100%. Enter in the text / html code box: <iframe src="your_pdf_file.pdf" style="height:720px;width:100%;" > </iframe > Because a long pdf-file is not always readable to the end on an iOS device like an iPad, enter in the 'Info window title' field next text to make a link: [Open in new window](your_pdf_file.pdf)

Set check-box 'Show info window if you open the album' and / or file the fields 'Info window button image' and ''Info window button text or hint'.

You can make a back-up of the extra files in the output directory in a folder named out in the corresponding image folder. Create such a folder, exclude the folder in the jAlbum Explorer and copy all the extra files to this folder. If an album is made, these extra files are automatically copied to the output directory if these files are not already in the output directory.

Skin settings – Index page / Footer

The HTML or text code in the first text box allows you to insert a block html code or normal below the thumbnails, just above the footer text boxes. It is centered aligned text, unless you use an html tag to change this or you set check-box 'Use left-aligned text'.
If check-mark 'Show print button' is set a Print button will be showed, to print the text in the generated text block. For an example see this album.
You define here the contents for the root album. For the folder albums you should use the FancyBox panel to define the contents of the corresponding folder album. The settings of the two check-marks described above are also valid for the FancyBox panel. You see here the code used for this sample album. If this text field contains no p or br html-tags, the line-feeds will automatically be replaced by html new-line tags.

At the end of the index page you can show a special image for instance to show the profile of a GPS track, see this example album, but you can use that image for other purposes, like your logo, as well. Put that image also in the output directory and enter the file name in field 'Profile image'. If the Profile image ends with '.', the next file extensions are checked: first 'png', next 'gif' and finally 'jpg', only lower case extensions are supported in this construction.

In field 'Profile image width' you enter the display width of the image. You can enter a width in % so that the image is scaled if the window size is changed. This makes also the album responsive, the width is adapted to the screen width, so the album looks the same on an iPhone and on a big monitor. I use for a height profile mostly 480px. If you enter nothing the natural width of the image is used. If you enter a value in the next 'Max. width' field, the image will never get a width larger as the entered value. It is recommended to enter here always a value if a % profile width is used, to prevent that you get too large images on large displays. See as example the height profiles of my gpx walking's in my Algarve album.

You can make a back-up of the extra files in the output directory in a folder named out in the corresponding image folder. Create such a folder, exclude the folder in the jAlbum Explorer and copy all the extra files to this folder. If an album is made, these extra files are automatically copied to the output directory if these files are not already in the output directory.

The contents of the fields 'Left footer text' , 'Middle footer text' and 'Right footer text' are displayed at the bottom of the index page. If the 'Left footer text' box is empty, a link to jAlbum and the FancyBox skin will be shown in the footer. In all the fields described here and in the description of an album, you can use jAlbum variables like ${currentDate} as you see here in the'Middle footer text' field.

If you don't want this link, just enter a space in the in the 'Left footer text' box.

To enter a link in a footer field, you could use this code: [link text](link URL), but with version 22 or later version, it is better to use the html editor to create a link, so this possibility will be removed in a next version. Instead of a text, it is also possible to show a small image in a link, as is done in the 'Middle footer text' field above..

To show an image without a link, just enter the image URL in angle brackets like: <img src="wolf.png" > (save image wolf.png in that case in the output directory with a backup in an excluded out folder), but you can use the above described 'Profile image' field for the same purpose.

If you like to see the footer fields only at the top album in an album with folder albums, set check-mark 'No footer fields in folder albums'.

Set check-mark 'Remove footer fields code, to avoid conflicts in embedded albums.' in case you see problems in embedded albums which use also footer CSS-code.

Skin settings – Links

The Links tab defines all hyper-links on the index page. For all these links apply the rule: if the URL field of the link is empty, the link is invisible.

The controls in the 'Up-arrow button link' panel allows you to use an up-arrow button at the top of the index page.

The 'Parent page URL' link defines a link to another page via an up-arrow icon on the top of the root index page. If this field is empty no up-arrow icon will be visible except in a folder album. By entering 'javascript:history.back()' in the Parent page URL field you can return to the previous page, however in case of an album with folders it is better to enter an absolute address like 'https://andrewolff.jalbum.net/FB_Samples_AA/' or a relative address like '../menu.html' if your album folder is in the same directory as file menu.html, but if your album is one level deeper the relative address is '../../menu.html'. Normally you use only the 'Parent page URL' field to define the link to the page which did open this index page. However if you build a tree of albums and this is a descendant album from which, after it closes, should give the focus back to the open top index page, you should give a relative path like '../index.html' to the top parent page. Click here for an example of such a tree of windows. You will see that the settings selected by the viewer in the parent page, are copied to the child pages. However it is also possible to process folders in the standard jAlbum way, see here the same folders processed as one project. For more info read my note 'How to process pictures in subdirectories in jAlbum with the FancyBox, the Slide Show 4 or the PhotoSwipe skin'.

If you set check-mark 'Replace Up-arrow button by Home button' the Home button instead of the Up-arrow button will by showed at the top of the page.

If an album contains folder albums, the thumbnail folder icons are displayed in a second table of thumbnail folder icons after the slide picture thumbnails of the top album. However it is the responsibility of the album creator that the folders are located after all normal images in the jAlbum Explore.

The 7 lines below the 2 panels define the display of optional hyperlinks in the index page. A link will only be shown if the corresponding URL field contains a text. You can use the 'Browse ..' buttons to compose relative links to files in the output directory tree. Notice that in case you define a relative link to a file outside the album three, the link may become invalid if you move the output tree to another location.

The link will be opened in a new window if the check mark 'New window' is set, otherwise the index page will be replaced by the new page.

A link can be displayed as a button or as an icon, depending on the check mark in the 'Use icon' column. The text on the button is equal to the text entered in the button text field in front of the URL field. The size of the text, which defines also the size of the button, is defined on the 'General' tab after 'Button font-size'. Use a font-size of 28 or more pixels if you like to display your album on a small device like the iPhone. I recommend to check-mark 'Show these links in a button tool-bar', in which case no text buttons are showed and the standard font is used. If icons are used, the contents of the button text fields are used as hint message if you move with the mouse pointer over the icon.

The first and last link are default the links to preceding and following albums. Clicking the left/right button of the keyboard or giving a left/right swipe will activate these buttons. If one of these two buttons is clicked or activated and the 'New window' check-mark is not checked, the current index page is closed and replaced by the page at the URL address.

The second link is used to download a file. As default it is used to download a GPS track in a ZIP- or GPX-file. You have to save the download file in the root-output folder of the album. You can browse to ZIP- and GPX-files, but you can enter also other file types like TXT- and PDF-files.
If you use a general file name like tracklog.zip you can use this too for tracks in folder albums otherwise you should open the FancyBox panel to enter the file name for a folder album.

The other links are default used to show the track and/or locations of the photos in Google Maps or Google Earth (see also this note and the help file of my program MakeMap), but you are free to connect other functions to all buttons. The Google Maps button is activated by the down arrow key on the keyboard.

If no new window is selected for the Google Maps route link and a kml or kmz file is entered in the URL field, the map will be displayed in a section of the index page like the map for a slide location and a panorama expansion page. So background music is not stopped, but if a html file is entered, the index file is replaced by the html file and the background music stops if no new window is selected. No Track download button is showed if the track-log file does not exist in the output directory. No Google Maps button is showed if the corresponding relative html, kml or kmz file does not exist. No Google Earth button is showed if the corresponding relative kml or kmz file does not exist. These links buttons are always showed if an absolute URL (starting with http or mailto) is used.

You can make a back-up of the extra files in the output directory in a folder named out in the corresponding image folder. Create such a folder, exclude the folder in the jAlbum Explorer and copy all the extra files to this folder. If an album is made, these extra files are automatically copied to the output directory if these files are not already in the output directory.

If you choose to connect an other function to a button, you probably should not check the 'Use icon' check-mark, because the icon will probably not show the correct symbol for the new function (unless you replace the standard 50x50 pixels png image in the res folder by a new image). There are two buttons where you may chose your own custom icon: the icon of the extra page button and the icon of link 6. Select the image for link 6 with the Select button below the URL field. If the corresponding field is empty, the standard 'More Info' image will be used.

You can use this field to implement a mail button with the mail.png button ion the res folder:

Mail link

The URL field 6 should start with 'mailto:' followed by your email address.

Each link will be activated with a fast key:

The next two buttons "Show Help button" and "Show Viewer Settings button", can be used if no top-buttons are used on the index page ('Show never' selected in the 'Top row of buttons' group on Skin settings – Index page / General). See here for an example.

You can combine icons and buttons, but in that case it is advised to set the next check-mark:

If you set next check-mark 'Show these links in a button tool bar', you will see these links in a tool-bar with colors and appearance defined on the 'General' tab.

If you set check-mark 'Show these links too in folders', you will see these links also on the index pages of folder albums.

With include file buttons.inc you can make more buttons, see Include files.

If you set check-mark 'Show these links in the menu bar', you will see these links in the menu bar at the top of the index page. The links are in that case text links and these links are not shown as buttons elsewhere on the index page, also not if next check-mark is set.

Normally these links and the album description is showed below the thumbnails on the index page, but if you set check-mark 'Show these links and the album description above the thumbnails', you will see these links below the theme image, see here for an example.

Skin settings – Slide page / Layout

Skin settings – Slide page / Layout

Check-box 'Use whole view-port for slide image if view-port height <' allows you to use the whole vertical internal height of a window for the slide image. If you enter a value for the minimum view-port height after this check-mark, it is only applied for small devices with a view-port height below the given value. So I see it only on my iPhone if I enter a minimum view-port height of 400 px. If you leave that field empty it is applied on every device.

If you set check-mark 'Prevent that the description overlaps the image', the description will never be displayed in the image. If this check-mark is cleared, the caption disappears after some time (if the navigation buttons do also disappear).

With the 'Infobar, toolbar and arrow buttons color:' selector you can define the color of the text in the infobar, the color of the toolbar buttons and the color the navigation arrow buttons.
With the next 'Background color selector you define the background color of the text in the infobar, the background color of the toolbar buttons and the background color the navigation arrow buttons.
The 'Caption bar and side panel color:' color selector is used to define the background color of these two areas. I use here many times a full 100% transparent color to view the text above the slide page background as you see in this example.

The next 4 fields are used to make a border around the slide page image: Border color, Space to border, border width and border radius are defined in these 4 fields. With check-mark 'Put the border in the image' you can choose an implementation via XBorderFilter or via CSS. The XBorderFilter makes the border in the JPEG file itself, so if you change a border parameter, all images will be made and uploaded again, which can be a problem for large albums. You should also not use the XBorderFilter if you use 360° or spherical panoramas. The only advantage of the XBorderFilter is that you don't see a thick border for a moment if you open the light-box.

If the next check-mark 'Use same colors and/or background image as index page' is cleared, it is possible to define the colors in the 'Slide page appearance' group. This group contains the same controls as already discussed on the Skin settings - General tab.

The group 'Show EXIF info below the slide image' allows you to show Exif information below the photo description.

The image description is ignored if it is fetched from the EXIF data and it is equal to the contents of the next corresponding field. I do this because my camera manufacturer puts automatically the text “OLYMPUS DIGITAL CAMERA” in the EXIF remark field which I use to describe my picture. I do not like to see that text in my album if I did not give a description.

In the 'Show as description in a caption bar or side panel' group you can select the items you like to see displayed for a slide image. If you select more as one item, the items are separated by the selected number of line breaks. Titles are displayed in bold and keywords are displayed with a prefix indicated in the text field next to the Keywords option (leave that field empty if you don't like to see a prefix text).

If faces have been identified, for example by program Tag That Photo, then the names of the identified persons can be displayed as keywords under the enlarged photo on the slide page. In the Tag That Photo program settings you should select Write keywords, in the skin settings Slide show / Layout tab you must check the Keywords option and on the jAlbum Advanced / Metadata tab you must check the xmp and ITPC options.

The same is possible with the Lightroom program if the persons are added automatically or by hand as keywords.

The default way of showing descriptions is below the image, but if you have only short descriptions it is also possible to show these above the image by setting check-mark 'Show descriptions at the top of the window'.

You can set here also the text foreground color used for the description with color selector 'Description text color:'.

By setting check-box 'Use as background color for the description:' and selecting with the next color selector a (semi-transparent) background color for the description text, you may improve the readability of the title and/or description and/or ExifInfo in the image.

With the check-mark 'Fill box around the description and attach it to the image', you can attach the description to the image. To see it open this example album.

Note that the contents of the jAlbum 'Comment' field below a picture in the jAlbum Explorer is displayed as the description of the slide.

It is now possible to define the 'More info' link trigger (default '...'), the 'More info' text (default '...') and the 'Less info' text (default '<<'). Click-able area of the link enlarged.

All text behind '''More info' link triggered by:' text (default '...'), in a comment is displayed if you click on the 'More info' text (default '...') at the end of the initially displayed description, see here for an example album. Clicking the 'Less info' text (default '<<') will remove again the extended text. If you set check-mark 'Clicking a 'More info' link opens in a new window with colors and dimensions as set onto the 'Info window' tab', the extended text is displayed in a new modal window as you can see in this example album. If you don't want to use 'More info' links, clear text field ''More info' link triggered by:'.

It is also possible to show extended descriptions on a side panel with the check-mark and width text box: 'Show description in side panel with panel width:' in the same group. See this example of a slide page with a side panel. The width of the side panel can be defined as % or as px. The text is left aligned. If check-mark 'Show description in side panel..' is checked, the Exif data are also left aligned displayed in that side panel. No panel is displayed if the caption is empty, however if Exif data are displayed via the Exif button, the side panel is also visible if the description is empty.

If check-mark 'Display the panel alternately left / right of the image' is set, there is always a side panel visible and these panels are alternatively displayed left and right of the image. See this example album.

If you set check-mark 'Show description in fancyBox default gradient bar', the default gradient caption bar of the fancyBox library is used. See here for an example.

Default the description text is center-aligned, but if check-box 'Use left-aligned text (recommended for HTML editor)' is set, the description will left aligned.
The jAlbum HTML editor assumes that the default alignment of text is left-aligned. As a result, text entered in the HTML editor is shown left-aligned in the editor window, but after you made the album with the new entered text, you see the new text as center-aligned.
You can prevent that by checking this check-mark or by clicking the left-align button in the HTML editor if you start with a new text.

If you like to use centered text in the side panel, enter this css-code in the css code box on the web page tab:

.fancybox-caption__body { text-align: center; }

Skin settings – Slide page / Options

Skin settings – Slide page / Options

If check-mark 'Show image counter in the infobar' is set, the default fancyBox counter information is showed, like '2/5'.
Other items you can display in the infobar are the title, the file name with or without the file name extension or if check-box 'Show exposure date in the infobar' is set, the exposure date of an image or recording date of a video date will be displayed. See the Portfolio album for an example. The format of the exposure date depends on the contents of the Date format field of the Advanced / General settings tab, for instance in the Portfolio album I used this format: 'Recorded: 'dd-MM-yyyy.
It works for videos only with jAlbum version 22.0.3 or later

Check-marks 'Hide tool bar and navigation arrows' and 'Hide Close button' allows you to disable closing the slide page. It is advised to do this for embedded slide pages, see here for an example.

Default no navigations arrow buttons are showed on mobile devices which supports swiping, but if you clear check-mark 'Hide navigation arrows on mobile devices' they will become visible. This is sometimes useful if you use web-locations which are displayed in iframes.

Clicking a button in the light-box tool-bar on an iPhone in landscape mode where the Safari address tool-bar is hidden has no effect: the address tool-bar will become visible. Therefore with check-mark 'Hide tool bar' after 'iPhone in landscape mode:' it is possible to hide the tool bar in landscape mode. If you check the check-mark 'Move tool bar to the bottom' it is possible to use the buttons at the bottom of the page. To see this in action open a light-box in this album on an iPhone. To use the full window on an iPhone, close all tabs except the tab of the album and rotate the device 90° in landscape mode. In case of a panorama photo, the panorama expansion button is not visible. To expand a panorama, you should rotate the iPhone over 90° and click next the panorama expansion button. Close the panorama viewer with a swipe down.

With the spinner 'Minimal display time infobar, toolbar and arrow buttons:' you define the minimal time that these items are visible after loading the image. If you select the value '0'', these items will stay visible.
If the Slide page layout check-marks 'Prevent that the description overlaps the image', 'Show description in side panel with panel width:' and 'Fill box around the description and attach it to the image' are cleared, the description text box will as well disappear after this minimal time. These items will also not disappear if you use side panels.

If you are not going to use special viewers for panoramic pictures, it is advised to set check-mark 'Don't use Panoramic Viewers'. I that case all html code and extra libraries for panoramic images are removed from the created files. You can in that case still enlarge panoramas by clicking the zoom button; it is advised in that case to set check-mark 'Cylindrical panoramic image' in the 'Panoramic Image' user panel, which you see if you open the image in the Explorer.

If check-mark 'Expand Spherical panorama automatically' is set, the spherical panorama viewer is opened immediately if the corresponding slide is displayed.

A 'Play' button to start a slide show will be added to the tool-bar in the upper right corner if check-mark 'Enable slide show' is set.

If check-mark 'Start videos automatically' is set, the videos will start playing automatically on a PC. On most mobile devices an automatic start is not allowed by the operating system, so there the button has no effect.

Select the default viewing time per slide, the Transition effect and the Transition time in the 'Slide show parameters' group. The viewer can change these values in the Viewer settings window. The color and height of the slide show progress-bar can be selected with the last 2 controls in this group. Make the color transparent or the height=0 if you do not like to see a progress bar.

If check-mark 'Hide the buttons while the slide show is playing' is set, the buttons will disappear if the slide show starts. Stop in this case the slide show by clicking somewhere outside the image or by clicking the space bar.

Check-mark 'Start slide show automatically' is only used if check-mark 'Open first slide automatically' on the Skin settings – General tab is set. This check-mark allows you to prevent that the slide show is started automatically if check mark 'Open first slide automatically' is set.

Check-mark 'Open slide page in Full-screen mode' can only be set if check-mark 'Disable viewer settings' on the General tab has been set.

The slide show stops after the last picture or it can loop, depending on the check-mark 'Stop after the last slide'. If this check-mark is set, and the slide show is ready with the last slide, the slide page will be closed and the index page appears.

Set 'Use 'Tap image' to show next image' if you don't like to use that corresponding small button left and right of the image to do that. The same action is possible on a PC by using the space-key on the keyboard.

If a the slide show is not started from the index page, you can start it by clicking the play button in the tool-bar or on a PC by the space bar key of the keyboard. Stop the slide show by clicking the Pause button in the tool-bar (if the slide show is not active, such a click will close the slide page) or by clicking somewhere outside the image or by clicking the space bar.

By setting check-mark 'Show full screen button', a Full screen button is displayed in the tool-bar. However it is recommended not to do that: better show a slide page always full screen via the corresponding setting on the viewers settings window or use the Full screen button on the index page. If check-mark 'Show full screen button' is set, the Full screen button on the index page is hidden.

If you like you can remove the default zoom button, by clearing check-mark 'Show Zoom button'.

If you set check-mark 'Show Thumbnails after opening slide page', a thumbnails strip will be displayed on the slide page as you see in the Carousel sample album. The strip will be hidden / showed if you click the 'Thumbnails' button in the tool-bar.

If check-mark 'Show 'Download image' button' is set, a 'Download image' button is added to the tool-bar in the upper right corner. Which quality is used for the downloaded image depends on the Album Settings - Pages.

If you like you can remove the default thumbnails button, by clearing check-mark 'Show Thumbnails button'.

Just as on the index page, you can start an email on the slide page: by checking check-mark 'Show Share window button'. For more details see above. If you set check-mark 'Show in email link to photo instead of link to the web-page' in the 'Email contents' group, the URL of the picture will be showed in the email body text.

You can also select setting 'Link to originals' for instance if you process RAW images in for example Lightroom 6. Export in that case 3840x2160 images to the jAlbum image directory, select 'Link to originals', 'Copy originals as needed' and 'Make images look sharper on HDPI displays' and make the album. The slides directory stays empty in this case.

If you set check-mark 'Show location button', a Google Maps icon is displayed in the upper right corner, Clicking this icon will show in a Google Maps window where the picture or video is exposed.

If you set check-box 'Show location in a new tab', and you click the location button above a slide, Google Maps shows a map with the location in a new tab. No Google Maps API key is required if you use this location display option.

You can show the location of video's if you add the GPS location manually to a video: open the Google Earth program, select in the preferences for the Latitude/Longitude display format 'Decimal degrees' if that is not already done and set a way-point on the location where the video is recorded. Open the video in the jAlbum Explorer in Edit Mode and enter user variable 'gpsLocation' in the first row and enter the values in the 2nd row via the clipboard, for example '51.800198, 5.247233', finish with the Enter key to save the values.

If the video is recorded with a smart phone, the GPS location is already available in the video file and jAlbum 23.0.1 and next versions can handle this, if it is a MP4 file not recorded with an iPhone. For iPhone videos and other video formats, you can use the GPS tool Video GPS metadata to export the GPS location to jAlbum.

If you like to see the address information above the marker, set check-mark 'Show location address (Geocoding API required)'

To share a slide page, use check-mark: 'Show Share window button'. If set, the slide page shows a Share button to open a modal window with maximal 5 share buttons for WhatsApp, Facebook, Twitter, Pinterest or Email (WhatsApp only on mobile phones). If the viewer clicks on that button, the image will be uploaded to the selected medium.
The clipboard contains a link to this image and a link to the corresponding slide web-page, so use the key combination Ctrl+V in the description area if you like to include a link to the slide page.

If check-mark 'Make images look sharper on HDPI displays' is set, the width and height of an image is divided by the device pixel-ratio if the pixel-ratio is 2 or larger. This is important for retina displays. But if you have a laptop with a screen resolution of 3840x2160 which you have scaled to 200% to make text better readable, the size of a 1920x1080 image is reduced to halve the screen. To prevent that with 'Link to scaled-down images only' set, clear that check-mark or set the image bounds to 3840x2160 instead of 1920x1080 with HDPI images cleared or keep image bounds 1920x1080 and set HDPI images. For the most optimal resolution, you set check-mark 'Make images look sharper on HDPI displays', clear check-mark 'HDPI images' and set the image bounds to 3840x2160.

Skin settings - Map

The photo or video location can be displayed with Google Maps if the 'Show location button for Google Maps' check-box is set and the Photo or Video does contain GPS information. Each user of the Google Maps server should have his own key as is explained in this jAlbum message. This key is used in the album code, so it is part of the skin parameters and it can be entered in the Map tab:

Skin settings - Map

You can get a key here, but before you ask a key, you should create a Google account, if you don't have that already. If you leave this field empty or if you enter a invalid key, you will see the message 'Geocoder failed due to: REQUEST_DENIED' is you try to show the location of slide page. If you create a key, it is important that you enable the Geocoding API as explained here.

This key is also required if you show the route in Google Maps via link 3 on the Links tab and you selects as URL a kml or kmz file.

As you see above, the Map tab allows you also define the Map type to be used (both for the slide location and the route) and the zoom level (1-20, value 1 shows the whole world and level 20 shows buildings). The zoom level is only used if you display the slide location.

If the Google Maps API key is empty, you can still show the location of a slide image, but in that case is the location showed in a new tab. However a route can't be displayed in that case.

Skin settings – Music

To play music in a slide show you can chose to play one track with the html5 audio player on the 'Music' settings tab:

Skin settings – Music

Enter here the URL of the ogg- or mp3-track or copy the audio file to the res folder by clicking the 'Select' button and browsing to the ogg or mp3 file you like to use. You can play that audio file on the server, but not on the local PC with the Internet Explorer and also not with the jAlbum preview function. The html5 player is supported by the latest browser versions of Internet Explorer, Edge, Google Chrome (both on a PC and on an Android tablet), FireFox and Safari (both on a PC and on an Apple iPhone or iPad).

If the check-box 'Play this track also in folders except if a track is defined in the FancyBox panel for a folder' is set and you use this in an album with folders, the music stops if a (another) folder album is opened and the same track can be started in the newly opened folder.

Check the check-box 'Start the music automatically ...' if the music should start automatically on a PC.

With text-box 'Audio tool-tip' it is possible to show the music name and possible copyright in a tool-tip.

If check-mark 'Show the audio hint above the audio player' is set this text is not showed as tooltip but as a text above the audio control.

If check-mark 'Show audio player above the thumbnails' is set, the audio player is not displayed at the end of the index page, but just before the thumbnails, so that the audio player is visible mostly if you open the index page. This is convenient on mobile devices, where music cannot be started automatically, so you should in that case always click the play button of the audio player.
If this check-mark is set, the space before or after the audio player may, depending on the selected page options, be too large or too small. This can be corrected by simple css code in the 'Web page' css code box like:

#audioplayer {
  margin-top: -20px;
  margin-bottom: 10px;
}

This sample album uses the music settings showed above.

If you have an album without folders, you should define the track here, but for albums with folders the track stops if you select another folder album, so we introduced more methods to play background music:

There are 4 methods to play background music:

  1. By selecting the audio track by the select button on the music tab displayed above. Use this for albums without folders, like this example album and for the parent album of an album with folders.
    It is possible to define a track per folder in the Audio file field in a FancyBox panel for a folder:
    Audio folder panel example
    You enter there the name of the music track and you have to save the corresponding mp3 track in the corresponding output folder by hand.
    However it is easier to enter there the URL of the audio track (like 'https://www.mysite.com/music/Spring.mp3'), because in that case you don't have to save the corresponding track in the corresponding output folder and you can move the output folder to another location without problems. I recommend to upload to your website a folder with music tracks you like to use in your albums.
    You can also select a relative link like '../../FB_Samples_AA/FreeMusic/bensound-thejazzpiano.mp3' with the Browse for 'file' button. But notice that in this example you define a relative link to a folder outside the album three, the link may become invalid if you move the output tree to another location.

    You can also in the FancyBox folder panel define the Audio tooltip per folder. The check-mark 'Show the audio hint above the audio player' discussed above determines whether this text is showed as tool tip of a text above the audio control.
    This sample album with folders show the track name as tooltip and this album with folders shows it as text above the audio control.
  2. You can also use the Music.htt web-page to start the background music. In that case the music continues if a folder album is opened. For an example see my Greece album. Note however that you should use the Music menu button in an album only once to start the music, because if you open next a folder album and click again the Music menu button, a 2nd Music page is opened. You or the system should not rename the Music.htt or Music.htm(l) file; only the filename 'Music' is valid.
  3. You can also define the audio track in a music.inc file in each folder with images. Example of such a file:

    <!-- Start of music.inc -->
    <audio controls autoplay loop controlsList="nodownload">
    <source src="https://andrewolff.jalbum.net/FB_Samples_AA/FreeMusic/bensound-summer.mp3" type="audio/mpeg" />
    </audio>
    'Summer' Royalty Free Music from <a href="https://www.bensound.com/royalty-free-music/track/summer-chill-relaxed-tropical" target="_blank">Bensound</a>
    <!-- End of music.inc -->


    See here for an example of such an album with folders where music.inc is used.
  4. You can also play music via Youtube music. Start the music via button 6 on the Skin settings – Links tab. Don't forget to check the 'New window' check-mark and load a custom icon for this button. See here an example album where this is used. After you click the music button, a new window opens where the music is played. Keep this window open and return to the album by clicking the album tab.

Miscellaneous points

Play sound track in the light box

It is possible to link an audio track to an image, see this jukebox album. To implement this, save the audio file (type mp3, m4a or ogg) in the output folder (the folder with the index.htm(l) file of the (folder-) album) and add an audio control in the caption, for example:

<p>Natuurcamping De Meenth</p>
<audio controls autoplay controlsList="nodownload" style= "width:90%;" >
  <source src="DeMeenth4.mp3" type="audio/mpeg">
</audio>

See here how that works.

It is also possible to make an album with only music tracks, see this example of a music tracks album. Save the MP3-files in the image directory with the Internet Explorer and make the album.

How to use HTML code

In most text boxes, like the Album description, you can use normal text or HTML code. If such a text field contains no <p> or <br> or any other HTML-tag, the line-feeds will automatically be replaced by HTML new-line tags (<br>).

To enter a link in the album description, slide description or other text block, you could use this code: [link text](link URL), but with version 22 or later version, it is better to use the html editor to create a link, so this possibility will be removed in a next version.

This is for example used in this album, part of the album description: 'Eind april 2007 wandelden we 10 dagen op het [Griekse eiland Samos](https://en.wikipedia.org/wiki/Samos ^). '.
This works only if there are no other () or [] brackets used for normal text in the description.
If you insert a space followed by a '^' character before the final ')' close bracket, the link will be opened in a new window. Generally you should not use this: the viewer can always decide himself to open the link in a new window by using the Ctrl key or using a long tap on the link. You can use this several times in the description, and other large text boxes as you see in this album.

You can use too simple HTML code like <br> to generate new lines, <b> and </b> around text to make it bold and <i> and </i> around text to make it italic.
If you do not use any HTML-tag, line-feed characters are automatically replaced by <br> tags.

In jAlbum version 21 you can also use a new HTML editor to format text, but that is not always correctly working if your text contains already html-tags, so do not to use that editor. In jAlbum version 22 is an other HTML editor implemented which works much better, so upgrade to version 22 or later version before you use the jAlbum HTML editor..

Default most of these text blocks are center-aligned, but if the text box has a check-box 'Use left-aligned text' and you check that check-box, the text will left aligned.
The jAlbum HTML editor assumes that the default alignment of text is left-aligned. As a result, text entered in the HTML editor is shown left-aligned in the editor window, but after you made the album with the new entered text, you see the new text as center-aligned.
You can prevent that by checking this check-mark or by clicking the left-align button in the HTML editor if you start with a new text.

The HTML editor can be used in the About, About Album, Music and Empty Page template files and also for the Skin InfoWindow and Footer fields (requires jAlbum 22). If you use the jAlbum HTML editor, you should not use the [link text](link URL) code for links; if this code is used, you have to remove it before you open the text in the HTML editor.

PDF-files

See this FancyBox album for some examples. If you drop a PDF-file in the Explorer window, you will see the standard Adobe PDF reader icon (thumbnail 7 in the album). Add a pdf-file via web location if you like to use your own thumbnail (thumbnail 8 in the album) or like to see the updates of the file in the source location. If a weblocation is used, don't click on the 'Update' button after the 'Target URL' text-box (see this problem report); add your own thumbnail in the 'Image URL' text-box.

To make a thumbnail image for a PDF-file weblocation, open that file in a web browser and make a screen-dump to create a thumbnail for the web location. Save the screen-dump in the output folder and select that image via the browse button after the Image URL field.

Because a long PDF-file is not always readable to the end on an iOS device like an iPad, enter in the comment field below the image a link to your local PDF-file or if a weblocation is used, a link to the original PDF URL.

You can also use a PDF-file as Info window or open a PDF-file via a button on the index page.

Movies

jAlbum converts all video formats automatically to mp4 format which is supported on the iPad and most other devices. Both skins plays videos only in the browser and Flash is not supported.

Movies can be combined with photos in a slide show with both skins.

If a movie is loaded the slide show in stops and the movie starts automatically, except on the iPad or iPhone and other mobile devices where you have to start the movie by clicking the play arrow button. If the album is on a server, the next slide or movie is automatically started if a movie finishes playing. If you test this locally on a PC this works only with the Safari browser. With Chrome and the Internet Explorer, you should start in the local preview test the next slide/move by clicking the next button. Firefox plays no movies locally. Internet Explorer plays locally no mp4 movies. But if the album has been uploaded to the server it works fine with the latest version of these browsers, even with Firefox.

Multilingual text

Multilingual text is supported. Currently there are text files for the following country codes: DE, EN, ES, FR, IT, NL and SV. However only the Dutch-NL and English-EN text.properties file is complete. The other languages are copied from the old slide show 2 skin, so you will see for newer items the English name. If you like to have your language file updated in a new version, send me a mail with the language file enclosed.

Include files

The following optional include files are supported:

I use mostly only these files:

To prevent that the Google search engine indexes your album and links, add file page-header_all.inc to the image directory with contents:

All these include files do work only for the index file in the corresponding output directory, except for files page-header_all.inc and page-footer_all.inc which works also for index files in the descendant folders, see here for an album where one page-footer_0.inc file, one page-footer_all.inc file, one page-header_all file and several page-header_2.inc files are used.

With .inc files it is possible to add AddThis tools for links to social sites:

To implement AddThis floating Share buttons insert the javascript code before the </body> tag by inserting the code in file page-footer_00.inc .

It is possible with a check-mark on the Index page / General tab to move the help button to the settings window. You get in that case more room for other buttons.

If you require a special inc page for a specific album, put the inc file in the images directory of that album. If you like to use an inc file for all your albums, put the inc file in the root directory.

The use of the freefind search engine

To add a search text box with a search button open the freefind website, enter the website of your album and add the other required data. Next select the Build Index tab and click the Index now link. If the building of the index is ready, you will get an e-mail.

To get the required code to your album open the HTML tab, select the search box layout of your choice and get the html code. Next add that code to the top index page of your album. I use the most simple search box, but use On page results, so I add also the extra javascript code.

I did remove the table tags in the fetched html code, translated the search button text in Dutch and saved the result for in file buttons.inc in the root image directory of the album:

<!-- Start of buttons.inc-->
<!-- start of freefind search box html -->
<form style="margin:0px; margin-top:-40px;" action="https://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="your_side_id">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="÷">
<input style="font-size: 20px;" type="text" name="query" size="20">
<input style="font-size: 20px; cursor:pointer;" type="submit" value="zoek">
</form>
<script src="//inc.freefind.com/inc/ffse-overlay.min.js" async></script>
<!-- end of freefind search box html -->script src="//inc.freefind.com/inc/ffse-overlay.min.js" async></script>
<!-- End of buttons.inc-->

You could enter this code also in the Skin settings – Index page / Footer html code text box.

You can see the result in my Algarve album.

I did customize the search page: I did remove the site map which for unknown reasons does not contain useful information for jAlbum folder albums. I changed also the background and text color of the search window., so that it looks more like an album page.

Things to know:

Change css code for a folder album

If you make a multilevel album with a top album and folder albums, all albums do get the colors and style as set in the project file. If you like to change the colors of one particular album, you can do that saving a page-header_0.inc file in the image directory of that folder album. Define in that file the css rules you like to change in that folder album:

<!-- Start of page-header_0.inc -->
<style>
body {
background-color: rgba(230,212,186,1.0);
color: #000000;
}
#title_in_image {
color: #FFFFFF; /* White title in theme image */
}
</style>
<!-- Start of page-header_0.inc -->

The 3 numbers in the background-color code correspond with the first 3 numbers of the RGB tab of the color selector. With the last number you can change the transparency of the background. The text color is defined by the color code. In this example black, you can find the code in the last text box of the RGB tab of the color selector.
With he #title_in_image block you can override the properties of the title in the theme image.

With the next page-header_0.inc file you can change the background image of a particular folder album:

<!-- Start of page-header_0.inc -->
<style>
html, body {
height: 100%;
background-image:url(Lucht_060203_46.JPG);
background-position:center top;
background-repeat:repeat;
}
</style>
<!-- Start of page-header_0.inc -->

In this example I use a file Lucht_060203_46.JPG for the background which I saved in the corresponding output folder.

Language support for the viewer

You can implement a Google Translate combo-box in your top album to translate all text in that album and the folder albums. As an example see this testalbum.

The top album and all folder albums do require a googleTranslateElementInit function which can be implemented with the next code in the first code text-box on the Skin settings – Web page tab. Uncheck check-box "Insert this code only in the main (top) index page".

<!-- Start Google Translate -->
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement(
  {pageLanguage: 'en,
  'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- End Google Translate -->

You can insert this code also in the page-header_all.inc or page-footer_all.inc file.

The translate combo-box in the top album could be included as an absolute positioned element with file page-header_0.inc:

<!-- Google Translate combo box code in page-header_0.inc -->
<div id="google_translate_element" style="position: absolute; top: 6px; left: 20px; z-index: 99999;"></div>
<!-- End page-header_0.inc -->

But it is better put this as an inline element in the album description as is done in this testalbum, just add

Select your preferred language:  <div id="google_translate_element" ></div>

at the end of the album description of the root album.

In version 5.3 it is possible to insert the combo-box in the menu, by inserting this code in first or second code text-box on the Skin settings – Index page / Folders tab, for an example see this album

Another possible place for this code are the Footer fields on the Index page / Footer tab or in a Bootstrap menu like in this album.

The code above generates a combo box with local language text, Dutch in my case and wth a different background and letter type as the rest of the menu:

Translaate combo box

You can change that by adding module stylinggt.js and adding this javascript code on the Skin settings – Web page tab:

setTimeout(function() { defaultStyle(true, "", "Translate", " ", "transparent", "transparent", "white", standardFontSize, "", standardFontFamily); $('#google_translate_element').show(); }, 1000);

function defaultStyle is defined in module stylinggt.js:

function defaultStyle(remove, leftIcon, centerText, rightIcon, borderColor, backgroundColor, textColor, textSize, fontWeight, fontFamily)

The last 2 arguments are added in a modified stylinggt.js module which you can download here. To use the same font-family and font-size as used in the rest of the menu, two global javascript variables have been added in version 3.5: standardFontFamily and standardFontSize.

With this extra code, you can change the displayed text and style of the combo box as you see here.

How to make a spherical panorama with the Google Street View app

In the Google Play Store and the Apple App store you can find the Street View app which makes it possible to make 360° spherical panoramas with a smart phone.

You can view the resulting panorama in your browser or in the Street View app, but you can also view such a panorama in the light-box of the skins described here.

To implement such a panorama in an album you need the URL of the Street View panorama. The easiest way to get that URL is to click the Share button of the panorama image in the app and sent an email with the URL to yourself.

With the FancyBox skin, the web location will be displayed in an iframe. In that case, before you enter this URL in the Target URL field of the web location, you have to change the link for use in an iframe:

You can find the recipe in the Google Streetview API documentation here.

The correct code is: https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=52.4085984,6.897875
&heading=210
&pitch=10
&fov=35

So you have two things to change in the web location URL constructed from the direct link:

  1. The address should be changed from 'https://www.google.com/maps/' into 'https://www.google.com/maps/embed/v1/streetview/'
  2. The Api key should be added: 'https://www.google.com/maps/embed/v1/streetview/?key=YOUR_API_KEY'. I could not use the key I normally use for my maps, see the Map tab, I had to use for Street View panoramas another key.

If there are more Street View panoramas in the area selected by your location, this may give the wrong panorama. In that case it is better to use the panorama id: 'https://www.google.com/maps/embed/v1/streetview/?key=YOUR_API_KEY&pano=YOUR_PANO_ID'.

To get the panorama id, open istreetview.com and click the 'Load a panorama' button. Copy the URL in the text-box and click the 'Load' button. The selected panorama opens in the right pane were you see also the Panorama id displayed. Click on the paper clip to copy the panorama id to the clipboard and insert '&pano=' followed by your panorama id after the api key.

Instead of displaying your panorama as web location, you can also display the street view panorama in the spherical panorama viewer. Therefore you have to download the panorama image from the Google server.

How to do this has been described in this blog. Don't forget to set for the downloaded image the 'Spherical panorama image' check-mark in the 'Panoramic image' panel and the first check-mark in the '360°' panel.

To see both methods, open this Google Street view test album. Sadly enough the key used in this example is no longer valid .

You can also set check mark 'This is an album of albums' and use the original URL of the Street View panorama, see here for an example. The only disadvantage of this method the absence of a button to return to the index page with thumbnails; to return to the index page., use the return button of the browser.

How to make a spherical panorama page with the Marzipano Tool

The Marzipano viewer is an alternative for the interactive Photo Sphere Viewer of Jérémy Heleine which is standard used in my skins. The Marzipano viewer uses an image not made by the jAlbum program. The Marzipano viewer is displayed in an iframe and gives a better image at the south- and north-pole of the image.

To create such an image, open the Marzipano Tool page and click on the 'Start' button. Next click the 'Select files' button on the 'Add some panoramas' and select the image you like to process. After this selection you see:

Marzipano tool
  1. Next select the buttons you like to see in the viewer, I advice to select all, so 'Drag', 'Autorotate', 'View control buttons' and 'Full screen button'.
  2. If you like to set an initial view, click on the 'Set initial view' button if you see the view you like to see as initial view.
  3. Click on the green Export button, a zip-file project-title.zip will be downloaded.
  4. Unzip that file to a folder 'project-title'.
  5. Open folder 'project-title' and rename sub-folder 'app-files' to an unique name based on the original file name, for instance 'Marzipano-guysOrg' in this example. Use only letters and digits in this name without spaces.
  6. If not already done, make the album.
  7. Open the output directory via Tools / Open directories / Output directory and copy folder 'Marzipano-guysOrg' to the output directory.
  8. Next upload the album.
  9. If not automatically done, open the album on the server, in this example is the URL https://andrewolff.jalbum.net/FB_SpherePan/.
  10. Open now the just created Marzipano page by adding string 'Marzipano-guysOrg' after the album URL: https://andrewolff.jalbum.net/FB_SpherePan/Marzipano-guysOrg.
  11. Make a screen-dump of (part of) the image you like to see as thumbnail.
  12. Make now a web-location of the Marzipano page, by dragging the lock icon left of the Marzipano page URL to the jAlbum Explorer at the location you like to see the new panorama.
  13. Click on the More button and next on the Edit button and browse with the Browse button after the Image URL field to the screen-dump file.
  14. Make the album again and upload the result.
  15. Click on the just made screen-dump image, to open the panorama as you see in the FancyBox spherical panorama album.

How to add a special album for smart phones

If you use large images like 2560x1440 HDPI images for your big monitor or TV screen, it may take a long time to see this images displayed on your smart phone, because the image are far too large for your phone and may be you have to pay too much to your network provider.

The solution is to a create a 2nd album with smaller images in such a way that the main album switches automatically to the 2nd album if it detects that the target device is small. This is possible if you insert this type of code:

<script>
   if (screen.width < 500) {
        window.location = absolutePath.replace("/Algarve/", "/Algarve_S/");
    };
</script>

into the HEAD section of your main album which is used for large screens. Javascript variable absolutePath is in version 3.5.1 inserted in the top of the <head> section. It gives the URL of the (folder-) album. You can do this by inserting this code in the 2nd text box on the Skin settings – Web page.

For a simple new album without extra files, you can follow the procedure I described on the jAlbum forum.

However if your album contains a number of manually added files like GPS-tracks, Map files or height profiles, you better follow the procedure described here.

I will describe the procedure I used to make a special album for small devices of my large Algarve album.

First I copied my existing album ../FotoSerie/Algarve/ to a new folder /FotoSerie/Algarve_S/

Next I opened the main Algarve album which produces 2560x1440 images with file Algarve.jap in the images directory, changed the slide image bounds to 812x375 (iPhoneXR screen size) and I changed the output directory to the just created folder Algarve_S. That is mostly sufficient, but I changed a number of more things: I removed the Google Translate link and changed some back links to my Algarve site to use spatial page I made there for small mobile devices..

Next I clicked the jAlbum Make button to replace the big images in output folder Algarve_S by small images and uploaded the album to the ../FotoSerie/Algarve_S/ page on my server.

Finally I saved the project via save project settings as .. to file Algarve_S.jap in the images directory.

Next I opened the main album again, added the code given above in the HEAD field of the Web page tab and made and uploaded the main album.

To see the final result open my andrewolff.nl/FotoSerie/Algarve/ album, you will see that it opens on smart phones the andrewolff.nl/FotoSerie/Algarve_S/ album, also for the folder albums.

If you later adds another folder album to the main album, you should first update the main album. Next You do a Make of the phone album and after this is ready, you add also in the corresponding folder of the phone album the files you added to the main album, for instance a map.kml file. Next click again Make for the phone album and upload the result.

Other documentation and notes

Program MakeMap

Program MakeMap is a program that can make a map.kml file to show in Google Earth and Google Maps the locations where the photos are made. It is possible to make links to the corresponding slide pages in the way-point windows.

You can download program Makemap from my software download page.

To read the on-line-help file click here.

Program EditPhotoInfo

Program EditPhotoInfo is a program which can extract the location information of a photo from a GPS track log file. It stores the coordinates into the EXIF data block of a photo, which enables the jAlbum program to show the location in Google Maps if the corresponding button in the upper left corner of a slide is clicked.

You can also make a map.kml file to show in Google Earth and Google Maps the locations where the photos are made. It is possible to make links to the corresponding slide pages in the way-point windows. You can do this now better with my program MakeMap.

The program can be used to add a description to a photo and save the description in the EXIF data block of the photo. However due to a bug in Album version 14 for Windows, see here, special characters like é and © are wrongly displayed in that version (no problem in version 13). So it is recommended to use a program like Adobe Lightroom to do this. To display these special characters correctly in version 14, add string '-Dfile.encoding=UTF-8' to the end of string 'Virtual Machine Parameters=' in file C:\Program Files\jAlbum\Jalbum.ini
This is no longer required in jAlbum version 20, provided you did set the xmp check-box on the Advanced / Metadata tab.

You can download program EditPhotoInfo from my software download page.

To read the on-line-help file click here.

In this note you can find a recipe for the whole procedure (in Dutch).