07 augustus 2015

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
cd "..\1-Geul_W2011_09_29"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\2-Hors_20140606-09_Mokbaai"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\3-20140608_Bollekamer"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\4-Dennen_W2011_10_02"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\5-20140602_Alloo"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\6-Bleekerij-20130401"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\7-20140604_Oudeschild"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\8-Muy_W2011_09_27"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\9-Slufter-Muy_W2011_10_01"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\A-Slufter"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages
cd "..\B-NoordenF2011_09_30"
java -Xmx800M -jar "C:\Program Files\jAlbum\JAlbum.jar" -projectFile "JalbumSS4.jap" -appendImages

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.