Comparing jAlbum Skins

 

Comparing jAlbum Skins

Introduction

To evaluate and compare various jAlbum skins, I created several albums using identical image content. To highlight the differences between skins, I also included a web location pointing to a Wikipedia page, an MP4 video, a YouTube video, a 360° cylindrical panorama photo, and a 360° spherical panorama photo.

This review includes the skins bundled with jAlbum as well as four custom skins I developed. All of these skins can generate single-page web albums, featuring enlarged images displayed in lightboxes with optional full-screen and slideshow functionality.

You can view the comparison via this album of albums web page:

You see there the next jAlbum bundled skins:

Animatics

A full-window, responsive skin from the Tiger/Projector/Photoblogger/Lucid family. Unlike most skins, it begins with the first image in a lightbox rather than a thumbnail overview.

Lizard

A continuation of the Chameleon tradition, starting with a thumbnail view and a feature-rich top bar for navigation.

Lucid

Behaves like Animatics: if there are no folders, the album opens directly in a lightbox.

Photoblogger

A responsive, feature-rich skin offering social media integration, image sliders, a shopping cart, tag cloud, feedback, and maps. It starts with thumbnail view when folders are absent.

Projector

Also full-window and responsive, this skin emphasizes slideshow presentation. It starts with a theme image and a button to launch the slideshow.

Story

A single-page skin designed for a mix of images, videos, and text. You can add custom (HTML) content or dedicated text blocks.

Tiger

jAlbum’s most widely used skin. It inherits many Photoblogger features and presents a responsive layout, starting with a thumbnail overview when no folders exist.

Plain

A minimalistic skin utilizing the PhotoSwipe lightbox (also used by my PhotoSwipe skin). The demo album leverages `.inc` files for custom code insertion, as described in my blogger note,

Next to these bundled skins, I show these images in my 4 skins:

PhotoSwipe

Uses PhotoSwipe 5 lightbox, similar to Plain.

FancyBox

Employs fancybox-3 for sleek image display.

LightGallery

Built around the LightGallery library, supporting over 20 CSS3 slideshow transitions. It includes animated zoom effects on opening/closing the lightbox.

Slide Show 4

A successor to Improved Slide Show 3. All slide content is embedded in the index HTML file—there are no separate slide pages.

The last 4 skins are ideal for showcasing travel and walking tours, offering responsive thumbnail layouts and extra features like the display of Google Maps or OpenStreetMap maps, download GPS tracks, open other albums etc, which are implemented via buttons on the index page.

Feature Comparisons

Full-Screen Support

All skins support full-screen image viewing, but how it's implemented varies. For example:

• Tiger, Photoblogger, Projector: full-screen must be pre-configured; it can’t be toggled by viewers, although Photoblogger and Tiger allow adding a button for this.
• Animatics, Lizard, Lucid, Story: include a full-screen toggle button in the lightbox's top-right corner.
• Slide Show 4, PhotoSwipe, LightGallery, FancyBox: a full-screen toggle button can be be enabled from the lightbox settings window or the viewer may select it in the viewer settings window.

Slideshow Transitions

• Photoblogger, Story, Plain, Lucid: offer just one transition type.  The Story and Photoblogger skins allow the viewer to change the view time.
• Tiger, Lizard: support three types, but no viewer control.
• Animatics: supports four transitions, but the viewer can't change the type of transition or the view and transition time.
• Projector: supports eight transitions, but the viewer can't change the type of transition or the view and transition time.
• PhotoSwipe: doesn’t support transitions, but lets the viewer control viewing time.
• Slide Show 4, FancyBox: six transition types, all viewer-selectable.
• LightGallery: leads with a whopping >20 user-selectable transitions.

Background Music

All skins support background music. The Slide Show 4, PhotoSwipe, LightGallery and FancyBox skins are limited to a single MP3 file.

Web Locations & Videos

• Tiger, Photoblogger, Projector, Lucid, Animatics: web locations appear in separate sections of the index page.
• Lizard, Story, Plain: show them in-line with image thumbnails.
• Slide Show 4, PhotoSwipe, LightGallery, FancyBox: support inline web locations with an integrated “Back” button.

YouTube videos behave like web locations and share their display limitations.

360° Panoramas

• Spherical panorama images are supported in Photoblogger, Story, Tiger, PhotoSwipe, FancyBox, and Slide Show 4.
• Cylindrical panoramas auto-pan in Lizard, Story, Tiger—but not infinitely. The Slide Show 4, PhotoSwipe and FancyBox skins feature smooth, continuous panning both on desktop and mobile.

Maps

• Photoblogger, Story, Tiger: generate maps with all photo locations via built-in skin code.
•  PhotoSwipe, FancyBox, LightGallery and Slide Show 4.: support advanced interactive maps (via my Windows program MakeMap), which include GPS tracks, photo markers, viewer’s location, and Google Earth or OpenStreetMap support.
• These maps can also be made by MakeMap and  added to other skins (e.g., Tiger, Projector, Plain) using custom code as shown in the discussed albums.

Other Unique Features

• Shopping cart: Available in Tiger, Story and Photoblogger.
• Search feature: Found only in Tiger, Lizard, Story, Projector, and Photoblogger.

Smartphone Testing

I tested all skins on an iPhone 13 Pro (in portrait mode: 320×509 logical px). Here’s how they fared:

• Animatics: Issue when tapping the title bar.
• Lizard: Caption size is problematic, and the top bar could be more compact on small screens.
• Lucid: Similar caption issues.
• All other skins: Displayed well on the small screen.

How to display a location map on the Contact page of my jAlbum skins

The contact page of my FancyBox skin, my PhotoSwipe skin, my Lightgallery skin and my SlideShow 4 skin have been improved:

• Four new user definable links have been added.
• The width of the contact page image can be defined in px or %'.
• You can now add text and / or code to the contact page, for example to add a location map.

To add a location map, use the following procedure:

• Open the Google Maps web-page.
• Enter your address in the upper left search box or add a marker to the map by clicking in the map on the location you like to show.
• Next click on the 'Share' button.
• Select the 'Embed a map' tab.
• Click on the 'Copy HTML' link to copy the code to the clipboard.
• Open the Contact page in jAlbum and enter the code in the large lower text block via the keyboard combination ctrl+V or by clicking with the right mouse button in the text block and selecting 'Paste' in the menu.

You see now a text like this: 

<iframe src="https://www.google.com/maps/embed?pb=!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Change the width "600" into "90%" to avoid problems on small smartA-phone screens .

You may add some text above the map by entering before the <iframe text a string like <h3>Location</h3>

To see the result open this example album and click on the 'Contact jAlbum' menu button.

It uses these Contact page settings:

You see here a width of  20% for the Contact image, so this image is adapted to the window width.

You see here also the 4 new link fields.

Instead of the embedded map page you can also use a link to open the location in a new window. Select in that case in the Google Maps page, after you clicked the 'Share' button, the 'Send a link' tab and next click the 'COPY LINK' link. Enter this link in one of the new link fields on the Contact page via the ctrl+V key combination and add a text like 'Location' in the corresponding text field.

How to view your current position in a Google Map or OpenStreetMap route map in an jAlbum album.

In a Google Maps map

With the latest version of the FancyBox, the PhotoSwipe and the LightGallery skin, it is possible to make a Google Map  route map with the photo locations and a new button to display your current position. As an example open this album  on a mobile device and click on the 2nd button from the left..

If you do this on an Pihone, you see this:

Click next on the location button, the left button in the upper right corner. The system will ask you whether it is allowed to use your current location. Confirm this. 

Next you see the Google map with a blue current location marker centered in  the map like in this example:

To remove the current location, close the map by clicking the close button in the upper right corner.

To implement this in your album, you have to set check-mark 'Show current location in Google Maps on mobile devices'  on the Map settings tab in the skin.

You make the map via program MakeMap:

For more info see the Help in MakeMap or this blognote 

In case you do not use the FancyBox, the PhotoSwipe or the LightGallery skin, it is possible to make a Google Map  route map with the photo locations in a separate file GoogleMap.html with program MakeMap. As an example, you can use this input in case you use the Lizard skin:

In a OpenStreetMap map

With the MakeMap program you can make a OSM_Map.html webpage which displays a leaflet OpenStreetMap map with the photo locations and optionally the current position.

Use the following settings to do that with  program MakeMap:

You should set check-mark 'Show current location on mobile devices', to display the current location in the generated map.

For more info see the Help in Makemap or this blognote 

This works for my 3 skins mentioned above, but also for the Plain skin and all other skin names you see if you expand the skins  combo-box  in the upper left corner.

As an example of an OpenStreetMap with the current position, open on a mobile device this webpage or open this album on a mobile device and click on the 3th button from the left.

If you do this on an iPhone, you see this:

Click next on the location button, the left button in the upper right corner. The system will ask you whether it is allowed to use your current location. Confirm this. 

Next you see in the OpenStreetMap a blue circle which represents your current localization The size of the circles corresponds with the accuracy of the location:

If you are near to the track you see something like this:

After you switched on the current location, the inner circle gets a red color. If you click again on the location button, the current location is removed and the inner circle of te location button ets again he black color.

New skin versions

My jAlbum skins have been updated:

FancyBox version 4.5.1.

PhotoSwipe version 5.7.2

LightGallery version 1.5.1

Slide Show 4 version 5.4.1

Survey of the changes:

• If a description is given in a folder tile, a possible link is removed, because a link in a link will not work.

• The description in a tile uses now also the 'Thumbnails text font-size', see this example album.

• The Map.htt template file is changed so that the close button is better visible, see this example.

• If a route map is shown with the OSM_Map.html web page made with my program MakeMap and the lightbox has been opened via a click in the thumbnail, you can now use the lightbox close button to return to the map, see this example. The latest version of MakeMap makes it also possible to disable opening the lightbox.

• PhotoSwipe library version 5.4.2 is now used in res\photoswipe folder of the PhotoSwipe skin.

• Style Blue has been added to the Slide Show 4 skin.

 

How to use a video or slide-show instead of a theme image with jAlbum

With the latest version 5.7.1 of my PhotoSwipe skin, the latest version 4.5.0 of my FancyBox skin and with the latest version 1.5.0 of my LightGallery skin it is possible to replace the theme image by a video or slide-show if you make a jAlbum web-album.

In both cases, you have first to remove the theme image:

1. Open the Explorer, click with the right mouse button in the Theme image in the lower right corner and select Remove.

2. Open the skin Index page / Theme image tab and clear field 'Theme image'.

3. Finally clear check-box 'If this field is blank or …'

Next open the Index page / Footer tab and check the new check-mark 'After the theme image'.

The other requred actions depends on the type of Theme image replacement.

Use a video instead of a theme image

Enter the next code in the html code text-box Index page / Footer tab:

<div class="iframe-container iframe-container-Video">   

<iframe class="frame" src="https://www.youtube.com/embed/YN5avcf43OE?autoplay=1&mute=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Next enter this CSS code in the CSS code text-box on the Custom code tab:

.iframe-container { position: relative; height: 0; }

.iframe-container-Video { padding-bottom:40% }

.iframe-container iframe { border: none; position: absolute; top:0; left: 0; width: 100%; height: 100%; }

Play with the padding-bottom % to get the desired display.

The youtube src string depends on the video you like to show.

To get this string, click on the 'Share' button below your selected video and next on the 'Embed video' button.

Finally make and upload the album,

For an example of an album with a video instead of a theme image, open my Drenthe album.

Use a slide-show instead of a theme image

First you should make the slide-show you like to use as a replacement of the theme image. You can use all my 3 skins to do that, but I recommend to use my LightGallery skin, because that skins has a large selection of slide-show transitions.

Select for the slide-show images with a large width / height ratio and use a large width x height images bounds:

If you like, you can make the ratio the same for all images with a fixed shape filter:

filter1

class=FixedShapeFilter all prescale

Enter this string in the Advanced / User Variables tab:

Control the cropping, click with the right mouse button in the image and select 'Set crop focus...' and select option 'thumbnails bounds' (for for me unknown reasons, there is no 'image bounds' option).

On the skin 'General settings tab select check-marks 'Skip thumbnails pages' and 'Disable Viewer settngs' and select a 100% transparent color for the 'Page background color'.

On the skin Slide page / Layout page', clear the next check-marks: 'Prevent that the description overlaps the image' and clear all check-marks in the 'Show as description in the caption bar or side panel'.

On the skin Slide page / Options, select the slide show parameters and set / clear the next check-marks:

Next make the slide-show as you see in this example.

Now open the project file of the album where you like to use the slide-show instead of the theme image.

Enter the next code in the html code text-box Index page / Footer tab:

<div class="iframe-container iframe-container-slideShow">

    <iframe scrolling="no" src="https://www.andrewolff.nl/FotoSerie/AlgarveSlideShow_LG/"></iframe>

</div>

Enter here the URL of the slide-show you made above,

Next enter this CSS code in the CSS code text-box on the Custom code tab:

.iframe-container { position: relative; height: 0; }

.iframe-container-slideShow { padding-bottom:25% }

.iframe-container iframe { border: none; position: absolute; top:0; left: 0; width: 100%; height: 100%; }

Play with the padding-bottom % to get the desired display.

Finally make and upload the album and you see something like my Algarve album.

Faster coding with the help of OpenAI ChatGPT

 

In the previous versions of my LightGallery, my FancyBox and my PhotoSwipe jAlbum skin, the menu did disappear if you scorll-up a thumbnails page.

I wanted to fix the menu a the top of the page if you scroll-up.

It is really amazing how fast you can do that with the help of the new AI ChatGPT  tool.

To see it open my ChatGPT conversation.

See the result in my France album.

I used ChatGPT too in my Plain-LG exercise to convert Groovy JAVA code to javascript code for use in the js-shell used by Laza.

That goes without problems as long as you know that you should replace the *Let* and *Const* statements in the ChatGPT code.

Here are two other examples for converting code:

Convert JAVA to JS.

Convert jQuery code into plain vanille javascript code

I posed next question to ChatGPT:

"Does there exists a browser for my windows 10 64 bits system where the cache is not used?".

This was the answer:

Here are a few browsers that offer options to control caching:

Epic Privacy Browser: This browser is designed with privacy in mind and offers a built-in option to disable caching. It's based on Chromium and is available for Windows 10.

Brave Browser: Another privacy-focused browser based on Chromium. While it doesn't provide an explicit option to disable caching, it has a Private Browsing mode that reduces data retention, and it blocks trackers by default.

Firefox: Although Firefox doesn't provide a straightforward way to disable caching completely, you can customize the caching behavior using about:config settings. Search for "browser.cache" in the configuration settings and adjust the values to control caching behavior.

Tor Browser: If privacy is your primary concern, the Tor Browser is an excellent option. It's based on Firefox but routes your traffic through the Tor network, offering a high level of anonymity. It limits caching and takes other measures to enhance privacy.

Comodo Dragon: This browser is based on Chromium and offers various privacy and security features. While it might not have an explicit caching toggle, it does provide options to clear browsing data automatically upon exit.Browser

I installed the *Epic Privacy Browser* and it seems to work fine to preview an album after a Make, but for daily use this browser is for me not suited: No Search possibility, no remembered passwords etc.

How to implement albums with a theme image with the FancyBox, the Slide Show 4 and the PhotoSwipe skin.

Both in the PhotoSwipe, in the FancyBox and in the Slide Show 4 skin is the possibility to add theme images implemented. This note describes the details to add theme images to your albums made with these skins.

You can use as theme image one of the images in the output slides folder, enter in that case in the Theme image field a string like "slides\Vecht_121027_1242-7.jpg" or you can put a new image to be used  as theme image in the output directory where also the index.html file of the album is located. As  an example we use the last method and put an image named “ThemeImageWithTitle.jpg” in the output folder. The original  theme image is processed in a photo edit program like Photoshop Elements, where we cropped the image so that the width is much larger as the height and we added the album title to the image. Finally we saved it as file “ThemeImageWithTitle.jpg” in the output directory (File > Save for web …) with a lower resolution,  a width of 2560 pixels and a height of 791 pixels. We created a first version of the album before we added the theme image, to create the output  directories.

Next we opened the Theme Image sub-tab of the skins Index page settings:

In the Theme Image field we enter the name of the theme image: “ThemeImageWithTitle.jpg”.

On the Index page / General tab you have the possibility to select in the 'Show Album title' group “Above the theme image”, “In the theme image” and you can hide the album title text “Hide Album title” In this example we did draw the album title in the image, so we selected “Hide Album title”.

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 “Album title text color” color selector or put the title above the theme image by clearing check-box “Show Album title in theme image”.

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. I use always 96%. 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 nothing the natural width of the image is used.

It is also possible to use the Theme image as a background image. Set in that case check-mark 'Use Theme image as background' and fill the height textbox with the height of the theme image (791 in this example). However you should not do this if you set the album title in the theme image with an editor, because depending on the window size, part of the title may fall outside the window.

With the next 4 fields, you can design a border around the theme image.

At the end of the index page you can show another special image. I use that to show the height profile of a walk, but you can use that image for other purposes as well. Put that image also in the output directory and enter the file name in field “Profile image” of the Index page / Footer tab. This image is not scaled, it is displayed in its natural width / height.

If you are ready with entering settings and the special images are loaded into the output directory, you have to re-make the album, even if you did not change anything to the settings after you loaded a theme or profile image.

To see the above described album, click here.

If you make an album with folder directories with one jAlbum project file, it is also possible to add theme images to the albums in the subdirectories. The creating of a tree of albums with the Slide Show 4 skin has been described here.

The album creator has to enter the theme image filename in the Slide Show 4 index page settings and he has to put the theme image in the output directory before the final creation of the album. 

If no theme image is entered in the settings, no theme image is displayed.
If a theme image is entered in the settings, but the corresponding file is not found, no theme image is displayed.
If a theme image is entered in the settings and the corresponding file is found, a theme image is displayed.

If you put a file “ThemeImage.jpg” in the output directory of the top level index file and nothing in the output subdirectories, a theme image is only showed in the top level index file.

If you like to use a theme image in one of the subdirectories, you should put in that subdirectory also a file named “ThemeImage.jpg”. This file contains of course another picture. If you like you can give all subdirectories a theme image by putting a “ThemeImage.jpg” file, each with a different image, in all subdirectories.

However if you use jAlbum verion 15 or later version, you can use the new Folder panel as described in the skin manual. 

Slide Show 4 album embedded in a web-page

Click the picture to start the slide show here in this window, click here to start the slide show in new window.
Next push (on a PC) the F11 key to see it full screen!

This is the index page of this album which is skipped in an album with an automatically started slide show:

You can display a slide show embedded in your web-page with an iframe. To do that, check  the check-mark 'Start slide show automatically'  on the Slide Show 4 settings General tab. For the example above, I used the following html code in the web page:

<iframe src="https://www.andrewolff.nl/testjalbum/frame/index.html" style="border:none; overflow:hidden;" height="350" width="700" ></iframe>

The slide show starts with the first slide page (index# 0), but you can start at any other slide page in the album by adding '?x' where x is the index of the first image to show. However in that case the slide show does not start automatically; start the slide show with a long tap in the picture or by pressing the space bar or by clicking the play button (if visible) . For example if you like to start with the third slide,  use text index.html2

With the next code:

<iframe src="https//www.andrewolff.nl/testjalbum/frame/index.html?M0" style="border:none; overflow:hidden;" height="350" width="700" ></iframe>

the slide show is also not started automatically. Use swipes or the arrow keys to go to the next/previous picture or start the slide show with a long tap in the picture or by clicking the play button or by pressing the space bar. This mode shows always navigation buttons.

You start the slide show normally from the index page by clicking the play button in the upper left corner or by clicking a  thumbnail, but you can start the slide show with a link on your web-page. As an example click on the small thumbnail above. The html code for this link is:

<a href="https://www.andrewolff.nl/testjalbum/frame/index.html?1"><img src="https://www.andrewolff.nl/testjalbum/frame/thumbs/Berijpt_Almelo_071222_05.jpg" width="130" height="97" alt="start slide show" /></a>

You can also start the slide show in a full window without status bar, menu etc. Try this this with the first button above. The html code is:

<form>
<input type="button" value="Click here and next F11 to see the slides fullscreen"
onclick='window.open("https://www.andrewolff.nl/testjalbum/frame/index.html", "fullscreen","toolbar=0,scrollbars=0,menubar=0,location=0,resizable=0,directories=0,status=0,fullscreen=yes,width=" + (screen.width) + ",height=" + (screen.height) + ",left=0,top=0");'>
</form>

To open the index page of  an embedded album, add "?-1" after the URL. For example to open the index page of this test album, make a link to "https://www.andrewolff.nl/testjalbum/frame/index.html?-1".

The viewing time per slide, the applied slide transition effect and time are defined when the album is created, on the Slide Show 4 settings Slide page tab:

You should indicate here too whether the navigation buttons should always, never or only in the pause state be displayed on slides. If these buttons are not displayed, navigation should be done via the key board or with swipes and gestures on the iPad. Click on the help button on the index page of a slide show to see how this should be done.

For an example of a page with 4 embedded slide shows go to the Demo of embedded Slide Show 4 albums page. Use the 'View source' function of your browser to view the code.

If you like to show your embedded album on various devices, you have to make the iframe responsive with extra css-code. For an example of an embedded responsive slide show, see this web-page and see here for an example of an embedded index page. To fetch this code, use jAlbum menu item 'Album / Embed album'.

Click here to download the Slide Show 4 skin, click here to see an extended description and click here to see another example of an embedded slide show.

How to process pictures in subdirectories in jAlbum with the FancyBox, the Slide Show 4 or the PhotoSwipe skin.

Both the Slide show 4 skin, the FancyBox skin and the PhotoSwipe skin allows you to display pictures in subdirectories of the main image directory as sub-albums which are opened via links on the main album at the top of the tree. 

I will discuss here 2 methods, in two examples. I use in both cases the same directory structure: a root directory which contains the images of the top album and contains also all folders with additional albums, both for the image directory and for the output directory. The jAlbum project files are saved in the image directories.

Before version 3.1 of the Slide Show 4 skin, the main album did stay open if you opened a folder-album, so that possible music started in the top-album did continue as a folder-album was opened. With the start of version 3.1 and with the PhotoSwipe skin, the folder-album is opened in the same window as the top album. This means of course that background music played by an audio control in the top album is stopped if the folder-album is opened. To prevent that the music stops if you open a folder-album, the music can be played in a new Music.htt web-page, which runs in a separate window.

There are 3 ways to create a such a tree of albums, via one jAlbum project file for all subdirectories in the top window, with for each directory a jAlbum project file which is saved in the corresponding directory or with an Album of albums via weblocations (requires jAlbum version 14).

1. One project file for all albums.

In the first case you have to set the 'Process subdirectories' and 'Include subdirectories in index pages' check-marks in the jAlbum Advanced / General settings:

If you check the 'Chain directories' check-mark (requires jAlbum version 12.2 or later version and Slide Show 4 skin version 2.1 or later version, with PhotoSwipe in all versions), you can use the the green arrow buttons on top of an index page to open the album in the next / previous directory of the tree.

In the second case, if you use a set of project files to generate the albums, you should not check these check-marks.

Using one project file is of course the fast method to generate a tree of albums, but it has a number of disadvantages:

1. The thumbnails and slides of all albums do have the same dimensions, because the settings on the jAlbum Images / General tab are applied in all sub-albums.
2. If you use fixed shape thumbnails they will be used in all albums, it is not possible mix albums with fixed shape and non fixed shape thumbnails
3. The number of thumbnails columns is the same in all albums, except if you set check-mark 'Variable number of thumbnails per row' on the index page settings.
4. If the html code text-box contains html code, it is only executed for the top index page.
5. The button links defined on the Slide Show 4 Links tab are only displayed on the top index page. If you check check-mark 'Show these buttons too if subdirectories are processed' they will also be displayed on sub-albums, but it is not possible to use in that case different links for different albums. This is mostly not a big problem. However if you use as links in your sub-albums the same file for instance more_info.html, the link will only be displayed if such a file exist in the sub-directory. The contents of file more_info.html can of course be different for each subdirectory.
6. It is not possible to use for each sub-album a picture in the slides directory as theme image. If you like to do that you should use in each sub-directory an include file page-header_2 with a contents like this:
<div class="themeImage">
    <img src="slides/150619-125959_Norrfallsvikken-7.jpg" style = "width:100%" alt=""  ></div>
However it is also possible to enter in the the 'Theme image' field a string like 'theme_image.jpg' and save the theme image under that name in the root- and each sub-directory of the output destination directory. No theme image will be displayed if this file is not found.

 To enter the Title and/or Description of a sub-album, click with the right mouse button on the folder which contains the pictures of the album and select in the menu 'Edit':

Next you see this window:

Enter the title in the Title field at the right site and enter the description in the comment field below the folder image.

For an example of an album made by one project file click here  and to see the same tree of albums made by 13 project files click here 

The Slide Show 4 index page settings of the first album contains the next parameters:

You see here that it is possible to give the border folder thumbnails a special color, so that you see better the difference with normal image thumbnails.

If the top album index page contains slide picture thumbnails and thumbnail folder icons, 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. 


2. A project file for each folder album

This is only possible with the Slide Show 4 skin,It is sometimes easier and more flexible to use a separate project file for each directory where you define this information for each subdirectory in the corresponding project file. You are in that case free to chose for each album the optimal dimensions and shape of the thumbnails and the slides and the number of thumbnails columns.

If you do this, there are 3 points important:

1. In the Album settings Advanced / General tab, you should clear check-marks Chain directories, Process subdirectories and Include subdirectories in index pages.

2. For each project file in a subdirectory, you should fill the same link address '../index.html' in the 'Parent page URL' field on the Slide Show 4 Links tab:

3. The links to the albums in the folders should be defined in the html code text block on the Slide Show 4 Index page tab of the top window:

In this example the links are displayed as 2 horizontal menu bars at the bottom of the index page of the top album:

The CSS code is standard available in the common.css file in the res directory, because the same code is used for the top menu you see at the top of the index page. This menu is defined at the links tab:

After you created the whole tree of albums you should upload it to the jAlbum website via the jAlbum project file of the top album (or use a FTP program to transfer all output directories to your own web server).

Creating such a tree is rather simple:

• First make the root album in the top directory.
• Next copy the resulting project file JalbumSS4.jap to the first subdirectory, edit that file in jAlbum by adding the link to the root, edit the output directory, browse to the theme image, change the thumbnails size is useful etc. and make the first folder album.
• Next copy that file to the 2nd folder and change at least the output directory and I make the album.
• Do the same for the other folder albums.
• Finally open again the top album and upload it to the server. The albums in the folders are automatically uploaded with the top album.

With the information supplied by jGromit, see this thread on the jAlbum forum, you can save time by doing this with a batch file.

In the root directory I created a batch file RebuilFolderAlbums.cmd with the following contents:

cd "D:\Users\Public\Pictures\Texel\TopWindow\0-Zuiden_W2010_09_04"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\1-Geul_W2011_09_29"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\2-Hors_20140606-09_Mokbaai"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\3-20140608_Bollekamer"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\4-Dennen_W2011_10_02"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\5-20140602_Alloo"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\6-Bleekerij-20130401"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\7-20140604_Oudeschild"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\8-Muy_W2011_09_27"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\9-Slufter-Muy_W2011_10_01"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\A-Slufter"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause
cd "..\B-NoordenF2011_09_30"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
pause

Double click on file  RebuilFolderAlbums.cmd to make all albums in the folders. Next build in the usual way the root album directly with the jAlbum program and upload the album in the root. Because the other albums are in sub-folders of the root, they are automatically uploaded with the root album. 
You see the result here.

The music is in both examples played in the Music.htt web-page, but there is one difference: the link to this music web pages is in the first example showed in the menu of all albums, but in the second example only in the menu of the top album.

3. With weblocations


This requires jAlbum 14 and the latest versions of the PhotoSwipe and Slide Show 4 skin. 

It is a simple method: First open all the sub-albums from internet in your browser. Next start a new album, check the check-mark 'This is an album of albums' on the General settings tab of the skin and drag the button left of the URL  text-box in your browser into the jAlbum Explorer window.
Enter the title and possible comment for each album and Make the Album of Albums.

See also the PhotoSwipe Album of albums or the Slide Show 4 Album of albums example.

Click here to download and install newest version of the Slide Show 4 skin and click here  to open the Slide Show 4 skin manual.