29 oktober 2017

PhotoSwipe and Slide Show 4 skin manual


Contents





Introduction


This note gives the required information to create albums with the PhotoSwipe skin and with the  Slide Show 4 skin. It is not a manual for the viewers of the albums, the user interface of Slide Show 4 albums has been described in a help file for the PC and in another help file for a mobile device like an iPad. Help for PhotoSwipe in a another help file for the PC and in another help file for a mobile device 

The responsive and mobile-friendly PhotoSwipe and Slide Show 4 skins 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.

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. You an choose there too to use no navigation buttons on the slide page, but do all control there via the keyboard or via swipes on mobile devices. Try it yourself here with the sample album! The PhotoSwipe skin has also an optional  slide show function.

Example of a full index page with music player and with a link to the parent form on an 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 for the Slide Show 4 this link and for PhotoSwipe this link.

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


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

Notice here the favicon image entered in the Slide Show 4 general settings tab.

If you click the settings button, the viewer settings page opens. With the Slide Show 4 skin you see:

With PhotoSwipe you see only 3 or 4 lines lines: 'Font size''Button size''Viewing time' (if the Slide Show option is enabled), 'Disable music autoplay' and 'Use full screen for a picture'.

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. 

The setting 'Disable music autoplay' will only be visible on a PC if an audio control is used in the album. It is not visible on a mobile device, because music is never automatically started on a mobile device. 

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 Slide Show 4 or PhotoSwipe 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 yellow mouse tip if you move the mouse cursor over a thumbnail. On a touch device you show this with a long tap on a thumbnail (if 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):

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 camara data are displayed below the slide description:
Remove the Exif data by clicking somewhere in the Exif text or click again the Show Exif data button.

If you click a button in a PhotoSwipe album album, the photo is enlarged (in Full screen mode if selected by the viewer):

The full screen message on the top disappears automatically after a few seconds.

The user interface has been described on the PhotoSwipe website: Swipe left / right to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom, swipe up or down to close the slide page and return to the index page. 
With the button in the lower left corner it is possible to Show or Hide the Exif info below the image if that has been enabled in the PhotoSwipe Slide page settings.

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:
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.

To enter a link in the album description, use this code: [link text](link URL).  This is for example used in the PhotoSwipe sample album, part of the album description: 
"[Click here](http://andrewolff.jalbum.net/Reestdal/index.html ^) to see …". 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 as you see in this sample album. 
The same code can be used in an image description or in a footer field, but there is only one link processed.

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

If the Album description is not empty, this description will be displayed below the pictures on the index page. You can use here too simple html code to generate new lines.


Album Settings – Pages


The layout of the index page is determined by the Pages tab:
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 hi-res via scaled images'. 

If Slide Page option 'Show Download image' is checked,  a Download button will be added in the upper left corner of the slide of the slide (Slide Show 4) or a menu item  'Show Download image' will be added to the menu (PhotoSwipe). If the user clicks on that button, he can download a copy of the slide image. To download the corresponding hi-res image (max 2048x2048) to your disk, select option 'Link to hi-res* via scaled images'. The original photo will be downloaded if option 'Link to originals via scaled images' is selected and check-box 'Copy originals' is set.  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'. 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:


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:

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. Make Rows 0 if you do not want that a 2nd index page is generated.


In the past I did use maximum 28 thumbnails on an index page (Columns=7 and Rows=4), this fits nicely on an iPad and iPhone. If the album is larger as 28 pictures, a second index page may be generated, but of course you are free to put more images on an index page. 

I prefer now to set option 'Table with variable # of thumbnails / row' on the Index page / Thumbnails settings tab. You see the result of this check-mark in the iPad and PC screen-shot of the album index page above. The contents of the 'Columns' field is not important for this mode, but I set Columns=7 in case I like to use an embedded album, see here for an example and more information.

You can fill the 'Link to homepage' block, this will generate a text button below the thumbnails on the index page. However in the PhotoSwipe and Slide Show 4 Links tab is a better place to define the link to your home page.



Album Settings – Images


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



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.
If the album contains wide (panorama-) pictures, an expand icon is automatically added in a Slide Show 4 album above the slide image, if (image width > 2.4 * image height) and (image natural height > 1.4 * initially displayed image height) or if the 'Cylindrical panoramic image' check mark in the 'Panoramic image' panel is set. In new albums, you should use the last method, because the first method will be removed in the next version.

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 or on touch devices by moving the image with your finger. Continue  the slide show with a long tap on the picture. To see an album with cylindrical panoramic pictures, click here

Both with the Slide Show 4 skin and the PhotoSwipe skin, it is possible to display panorama pictures in a panorama window, as discussed above via the  'Panoramic image' panel:

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 the aspect ratio may be larger, but in that case you can still use this viewer, as you can see with the other panoramic pictures in the example album. This viewer can be used in jAlbum version 13 and 14; the new ‘360° image’ panel introduced in jAlbum 14.2 is not used in the Slide Show 4 and PhotoSwipe implementation of the Photo Sphere Viewer.

You can use the panoramic images generated by jAlbum in the ‘slides’ folder. However it is also possible to use panoramic images not processed by jAlbum, by storing these pictures in a ‘panslides’ sub directory of the output directory. The name of the image in the ‘panslides’  folder should be equal to the name of the corresponding slide image in the ‘slides’ folder. The image in the ‘slides’ folder will be presented on the slide page and if the same image name is found in the  ‘panslides’ folder, that image is used if the expansion button is clicked. If such an image is not found in the  ‘panslides’  folder, the Photo Sphere Viewer will use the image in the ‘slides’ folder. It is also possible to use for the slide page and the viewer different images. To do that make the album and next copy the image from the  ‘slides’ folder to the  ‘panslides’ folder. Next edit the corresponding image in the images folder and make the album again. This procedure is used for the first slide in the example album.
Note: You can’t display a spherical panorama locally; you will see a warning message if you try to do this.

If you set the 'Cylindrical panoramic image' check-box as is showed in the example, above user variable maxImageWidth=50000 is automatically applied (You don't see this in the 'Variables' panel and before you set this check-box, you should remove a possible maxImageWidth user variable in that panel). It is not required to set this check-box if your images are exported from a RAW processor and 'Link to originals' is set, but it does not harm to set it also in that case.

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 jAlbum's integrated browser if your album contains panoramic pictures, because the integrated browser can't handle large pictures. Personally I have the integrated browser always disabled (Tools / Preferences / General).

More info in my note 'How to show panoramic pictures with the Slide Show 4 skin?' , which you should read if you like to display panoramic pictures.

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

With the user Link panel for a panoramic picture (only available in the Slide Show 4 skin) you can define a link to another location like a Street View panorama made on a mobile device with the corresponding app or a 360 degrees panorama uploaded to 360Cities.net:

To see this effect click here, and next click the 8th thumbnail. 

It is also possible to replace the slide image by an external web-page in an iframe. To do that, enter the URL of the external page in the 'Link URL' field and check the check-mark 'External page should replace slide picture'. The other fields should stay empty in that case.


With this feature you can display panorama pictures displayed in external viewers and YouTube or Vimea videos. Click here to see an example album. 
To get the correct link to a YouTube video, select 'Share' / 'Embed' and copy the src link to the link URL field. 
Here is an example of such a YouTube link: https://www.youtube.com/embed/HNOT_feL27Y and this is a link to a Vimea video: https://player.vimeo.com/video/47415148?byline=0&portrait=0
  
Because the whole slide page is filled with an iframe, the slide page touch interface will not work, but you can use the fast keys F, L etc. to open the Facebook share dialogue, display the location (if selected and the replaced image did contain GPS coordinates) etc.

This link panel is not implemented in the PhotoSwipe skin, but if you add a panoramic web page as 'web location', you get the same results.  To see panorama pictures displayed in external viewers and YouTube or Vimea videos, click here. 

If I do not select option 'Table with variable # of thumbnails / row' or Justified Gallery on the Index page / Thumbnails  tab, I select the size of the thumbnails in such a way that they can all be viewed on an iPhone screen:

Columns/Rows Thumbnails
         6 / 4    125x100
         7 / 4    100x100
         8 / 4     95x100

If You use only large screens, you can of course select larger dimensions.

If I select option 'Table with variable # thumbnails / row' or option Justified Gallery, I normally clear check-mark 'Fixed-shape thumbnails' and use as thumbnails size 400x80.
In case 'Fixed-shape thumbnails' is checked, I use size 120x80.


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 Slide Show 4 skin.

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.

I add slide descriptions and GPS location data with my EditPhotoInfo program or with het ADOBE Lightroom PROGRAMMA.

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.

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 Varibles panel, to enter eXtended Border filters, like you see here or 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 in version 3.2.4 and later versions, most effects can be made easier in the PhotoSwipe and Slide Show 4 skin.

Skin settings – General

The PhotoSwipe and Slide Show 4 settings are distributed over a number of pages. 
Most 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.

Next we describe the settings which are unique for the PhotoSwipe and Slide Show 4 skin. Click on the Album Settings / PhotoSwipe or Slide Show 4 panel to see these settings.

With PhotoSwipe you see:

With the Slide Show 4 skin you see:


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

You can display a Slide Show 4 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 'Start Slide Show 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!

A similar check-box 'Open first slide automatically' is available on the General tab of the PhotoSwipe skin. 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. With the PhotoSwipe skin it is more appropriate to embed the thumbnails gallery in a web page. This technique has been described in this webpage with a PhotoSwipe gallery. 


Notice that you should not check this checkmark if the album contains folder albums, because in that case you can't cliock 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.


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 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 Slide Show 4 menu bar, so the appearance is also determined by the menu bar settings on the Slide Show 4 settings - General tab.


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, see my Slide Show 4 Vechtdal album or my PhotoSwipe Vechtdal album. If you click on a thumbnail, the corresponding album will be opened in the same tab. Return to the parent album of albums by clicking the up arrow button on top of the child album. If this option is not set, clicking a thumbnail will open the slide image which corresponds with the web location. Next the web location is opened in a new tab by clicking the 'More info' link in the upper left corner (PhotoSwipe) or the i-Info button above the web location slide image (Slide Show 4), to see it click on the first thumbnail of next album album for the Slide Show 4 skin or for the PhotoSwipe skin.

Check the 'Preload all images' check-mark to preload the images if you open the album. Opening the album may last a little longer, but changing slides is faster. The PhotoSwipe skin has a smart load feature in the slide code, so this field is absent in the PhotoSwipe skin.

If the check-box 'Hide index pages in subdirectories starting in level X' is set in the Slide Show 4 settings, the index pages in subdirectories are skipped and the slide show start immediately with the first slide if you click a folder thumbnail. You can use this if you like to show a lot of similar photos as you do with for Time-lapse photography or with action photos were you take a lot exposures per second. A series of similar photos is stored in a sub-directory. Open this demo album to see an example of this feature, set in the Viewer setting the transition effect to None and the Viewing time to 1 sec. The parameter X is in this example 1, because the thumbnails of the first level of index page are hidden. This is not available in the PhotoSwipe skin.


Select the font family for all text with the 'Font-family' selection box and the size of the font used for the description and other text in the next 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.

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.


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. For examples see the PhotoSwipe Sample album or the Slide Show 4 Sample album and the albums indicated on that page. With the next check-mark you can also select a Google font for the other texts.


Four color fields define the color of the background, the text 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 slide page and on a Slide Show 4 slide 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 next 4 fields you can choose the appearance of the menu and/or buttons tool bar. Click here for an example of a menu bar.

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 Slide Show 4 skin directory res_Special. If you like to define your own buttons, you should replace the buttons in directory res_Special by png 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.

For the PhotoSwipe skin, these buttons apply only to the index page. For a PhotoSwipe 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.

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.

The image description is ignored if 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.

Standard for every album is a res folder generated for the resources like the buttons and the CSS files, but the PhotoSwipe and Slide Show 4 skins allows you to use one central resources folder for all your albums. To do this fill the 'Fixed res path' field on the 'General' tab with the URL of the central resources folder. It is also 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.

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 fixd URL on the 'Music' tab.

Finally you can in the Favicon image text box enter an URL of your favicon icon, which is showed in the browser tabs in most browsers. If you leave this field empty, the green jAlbum frog will be showed in the tabs.

 

Skin settings – Index page

The PhotoSwipe and Slide Show 4 settings for the index page are distributed over five tabs:


  • General
  • Theme image
  • Thumbnails
  • Footer
  • Html code

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

Skin settings – Index page / General 


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 > ".

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

  • Show the buttons always, the default value
  • Show initially
  • Hide initially
  • Show never, for embedded albums

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.

There are three ways to show the album title:

  • Above the theme image
  • In the theme image
  • Hide album title, for use in embedded galleries.
You can also edit the theme image and draw the title in the image, in which case you should select option 'Hide album title'.

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-toolbar (if used).

Default no text is displayed below the thumbnails of the index page, but you can see the file name and picture description in the yellow mouse tip if you move the mouse cursor over a thumbnail or on a touch device with a long tap on a thumbnail is check-mark 'Enable yellow information pop-ups on touch screens' 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.

We recommend to show image descriptions only on the slide page, because there is more space available for long text. To enter a link in an image description, use this code: [link text](link URL).  

The check-mark "Enable yellow information pop-ups on touch screens" allows you hide to yellow information pop-ups, to make it easier to scroll the index page on a small mobile device like the iPhone.

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. As an example see the Slide Show 4 sample album where the swipe area is restricted to the theme image, but yellow information pop-ups are enabled. In my Scandinavia album the swipe area is also restricted to the theme image, but yellow information pop-ups are disabled. In my videos test album are swipes not used on the index page and the yellow information pop-ups are also disabled. 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.

If 'Show Facebook button' is checked, a 'Share' button is displayed on the index page to share the album on Facebook. You can also Share a particular slide on a Facebook page via the Share button above that slide (Slide Show 4) or via a 'Share on Facebook' menu item (PhotoSwipe). This is only correctly in your album if you make and upload your album twice. Option 'Use secure links' should be set if your album is uploaded to a secure site (starting with 'https:') like the jalbum.net server.

If you check the 'Show mail button for email' check-mark, an email button will be showed on the index page. If a viewer clicks this 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 


The section above the horizontal line defines the title properties. 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 'Text color of title in theme image:' color selector 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, it is also possible to add a shadow to the title by checking check-mark 'Show shadow in title'. Select the shadow color with color selector 'Shadow color'.

The 'Vertical position' box allows you to shift the vertical position of the Title in the theme image.

The section between the two horizontal lines determines the source of 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 ouput 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. 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 (requires jAlbum V15). 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. If a folder album has no slides directory this method does not work.
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. You can define both a width and a height for the created theme image via the two text boxes after the check-mark. If a field is left empty, the corresponding image bound defined on the jAlbum Images / General tab is used.

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.

The section below the 2nd horizontal line defines the display of the theme image. 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 two screen-dumps:


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 box between the two horizontal lines.

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 ‘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. 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 nothing the natural width of the image is used.

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 Slide Show 4 and PhotoSwipe 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.


Skin settings – Index page / Thumbnails 




You can choose one of 4 types of thumbnails gallery options.

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.
Because the slide border and shadow parameters are not used if this option is selected, the panel which contains these parameters is disabled and a special panel for Justified Gallery parameters is enabled if this option is selected. 
Details of the Justified Gallery parameters are documented in the Justified Gallery documentation.  The ‘Row height’ defines the average height of a row. 
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. The default color is transparent, in which case the color of the gaps is equal to the index page color. 
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 heigth 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.

With option 'Table with variable # thumbnails / row' check-box, the number of thumbnails on a row will also be reduced if the screen width is reduced., see here for an example. The slide border and shadow parameters can be used, but most rows of thumbnails don't have the same length.

With the other two options, you get a fixed number of thumbnails per row (equals to number behind the jAlbum settings – Pages panel field 'Columns', in an elastic table of thumbnails, where the thumbnail size is reduced if the window width is reduced.

Two types of elastic table designs are supported:

  1. Option 'Elastic table with <div> tags', an elastic table structure made with floating <div> tags. You select this type by setting check-mark 'Don't use <table> tags'. This displays also an elastic table where the thumbnails size depends on the window size. Supported by all browsers both on PCs and on tablets and the iPhone. See here for an example.
  2. Option 'Elastic table with <table> tags', a classic html table structure made with <table> tags. This displays an elastic table where the thumbnails size depends on the window size. With the Internet Explorer and with Firefox the thumbnails size is fixed. But it works fine with Edge under Windows 10, with Google Chrome, Safari and on all tablets and on the iPhone. See here for an example.
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.


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 of the last 3 type of galleries.

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 'Thumbnails image border color' a thumbnail of a video and of a folder gets his own border color.

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.

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.

The next 8 fields 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), see this example, 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 now 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. The box width has only effect  if option 'Table with variable # thumbnails / row' is selected.

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


Skin settings – Index page / Footer 

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".

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 mostlu 480px. If you enter nothing the natural width of the image is used.

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 Slide Show 4 skin will be shown in the footer.

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, use this code: [link text](link URL). This is for example used in the footer fields of the PhotoSwipe sample album, as explained in the screen-shot above.
Instead of a text, it is also possible to show a small image in a link, as is done in the Middle footer text in the Sample album.

To show an image without a link, just enter the image URL in angle brackets like: <img src="wolf.png" >, 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 – Index page / HTML code


The HTML code text box allows you to insert a block html code below the thumbnails, just above the footer text boxes

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.

If option "Clicking the up-arrow button returns to the previous page" is set, the next 'Parent page URL' is grayed. This option works only if the album has been uploaded to the server and the album contains no folders.

The 'Parent page URL' link defines a link to another page via an up-arrow icon on the top op the root index page. If this field is empty and the previous option has not been set, no up-arrow icon will be visible except in a folder album. 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 Slide Show 4 skin.'.

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.

With the Slide Show 4 skin you can display an extra page in a frame on the index page. This is defined by the next 3 fields (absent in the PhotoSwipe skin).

If you like to use that you have to fill field 'Extra page URL' with the address of the extra page. That page should be a html file created with a text or html editor. For an example see my Arien album where the extra page can be opened by clicking on the wolf icon in the button tool-bar. To see the html code open that page in your browser and select 'view the source code'. You can use an image to open the extra page. Field 'Extra page 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 wil be displayed between the other buttons defined lower, between links 5 and 6. The text in the next field 'Extra page button text or hint' is used as hint message. If the 'Extra page button image' is empty, you will see a button with the text given in field 'Extra page 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. For an example, click here.


The next 7 lines define the display of optional hyperlinks in the index page of both skins. 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.

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 check-mark 'Show these links in a  button toolbar', 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 al 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 other links are default used to download a GPS track log file and to show the track and/or locations of the photos in Google Maps or Google Earth (see also this note and the helpfile 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.

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 pixels2 png image in the res folder by a new image). There are two buttons where you may chose your own image: 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:



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

Each link will be activated with a fast key:

  1. Left arrow key for the default 'Previous album' link.
  2. T key for the default 'Download GPS track' link.
  3. M key and Down arrow key for the default 'Google Map' link.
  4. E key for the default 'Google Earth' link.
  5. I key for the default 'Info' link.
  6. Home key for the default 'Home' link.
  7. Right arrow key for the default 'Next album' link.
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 toolbar with colors and appearance defined on the 'General' tab. Click here for an example.

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

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, see here for an example. 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.

With the Slide Show 4 skin, you can also add a link on the slide page. To do that select Edit image and next click on the Link text in the right panel. The Link panel for the image will be opened:


If you enter a link in the URL field, a link button will be showed at the top of the slide window. You can use it to show an external panorama page or an information page.

Depending on what has been selected in the Link panel, the link button is displayed as a panorama expansion icon, as a panorama expansion icon for the 360Cities.net site, as an 'Info' icon or as a button with the text defined in the Link panel.

If the link URL contains the substring '360cities.net' a 360 cities expand icon will be showed. If the link URL starts with 'http', a new window will be opened via window.open() else the URL is changed via the window.location property.

This feature is not (yet) available in the PhotoSwipe skin.


Slide Show 4 settings – Slide page


The viewing time per slide, the applied slide transition effect, transition effect time, whether the navigation buttons should be displayed on slides and whether over-sized images are allowed are defined in the first 5 selection fields, see the screen shot above. These values are also used as defaults for the selection boxes on the index page of the album, but the viewer can change these and the changed values are saved in the html5 local storage  for next time for this and all other albums.

In the next group 'Enable next option' you can select the buttons you like to see on the Slide Page:

Option "Replace web location image by the web site and add navigation buttons" requires jAlbum version 14. If set, the web location slide image is replaced by the opened web location and navigation buttons are showed in the upper right corner. To see it, click on the first thumbnail of this album. If not set, the web location is opened in a new tab by clicking the 'More info' button above the web location slide image, to see it click on the first thumbnail of this album.

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

If check-mark 'Show Facebook button' is set, the Facebook Share button will be displayed in the upper left corner to share the current photo on Facebook.

If the GPS location is available in the EXIF data block of the image and on the Advanced/Metadata tab the check-marks 'EXIF image Desc.' has been checked, you can add Google Maps button to display the GPS location in Google Maps. To do this check the 'Show location in Google Maps' check-mark.

If check-mark 'Download button' is set, a download button is displayed in the upper left corner of a slide page. Which quality is used for the downloaded image depends on the Album Settings - Pages.

If you use the album as an embedded slide show, by setting checkmark 'Start slide show automatically' on the 'General' tab, you can remove the close button by setting checkbox 'Disable Close slide page', to prevent that the viewer sees the index page in the frame for the album.

Exif data can be selected via a Exif data button in the upper left corner or these data are always or never shown.


In the next group 'Slide Image' you can select the the Slide Image properties:

You can put a border around a slide image in the color you select after 'Border color:'. Enter the border width in 'Border width' field (0-99 pixels). Just as with the thumbnails and theme image, you may also define 'Space to border' and a slide image 'Radius' for the slide image. With a 'Space to border' value > 0, you will see the background color or page background image between the border and the image.

If you set check-mark 'Show shadows on slide page', a shadow defined by the two shadow fields on the General tab will be displayed around the slide image.

The slide show stops after the last picture or it can loop, depending on the check-mark 'Stop after the last slide'.

The field 'Video display width' defines the size of the video window on the slide page of a Slide Show 4 album.

It is possible to use always the whole view-port for a slide image, if the size of the image allows that. See here for an example album. To enable that, set check-mark "Image should fill the whole view-port if the view-port is smaller as the image".
You should enable this only if all your pictures do have about the same size and are in landscape format (unless you view your images only on a mobile device). If you have a mixture of portrait and landscape formats, you will mostly see on a PC that the portrait format pictures will not fill the whole view-port, because in that case they should be enlarged beyond the natural image size. That is no problem on a mobile device, because for a portrait format picture you can rotate your device over 90°.

In the 'Image Description' group you can select the items you like to see displayed below a slide image. If you select more as one item, the items are separated by the selected numbere of line breaks. Titles are displayed in bold and keywords are displayed in [ ] brackets.  For an example click here.

Note that the contents of the jAlbum 'Comment' field below a picture in the jAlbum Explorer is displayed as the description of the slide. All text behind "..." in a comment is displayed if you click on the "More info" link at the end of the initially displayed description.

The description of a picture can be displayed above of below a picture. Make your choice via the 'Show description' drop down list box:
  • If you select 'above image', the description will be displayed left of the navigation buttons; the description and the navigation buttons will not be displayed in the picture.
  • If you select one of the next 4  types, the picture may fill the whole window and it is possible that the description and/or navigation buttons are displayed in the picture. 
  • If you select type 'above / below image in the border', the text will never overlap the picture, but the picture is made smaller to make room for the description. So if you have very long descriptions, you better select another type.
With color selector 'Shadow color', you can select the shadow color for description presentation types which uses shadow. If you set the shadow color equal to the used background color, you will not see the shadow if the text is displayed outside the image, but into the image, the text is more readable. Click here to see an example. With the color selector 'Background color' field, you select the background for description type 'below image in box'.

If you select type 'above / below image in the border', the 'Slide description in border text color:' is used for the description below the image. 
For the other 'Show description' types is the text color defined by field 'Other slide description text color'.

It is also possible to use frames and border made with jAlbums eXtended Border filter as has been described in this note. Don't forget to set all border widths to 0 if you use that. However in version 3.2.4 and later versions, most effects can be made easier in the Slide Show 4 skin. See for instance this album with transparent borders made with the Slide Show 4 skin.


PhotoSwipe settings – Slide page


With the first color selector you can select a (semi-transparent) color for the top and bottom bar on the slide page. It determines also the background colors of the arrow which are only visible on a PC.

If a 100% transparent color is selected in that color selector, it is still possible to give the image description a background color with the next check-mark 'Use background color for image description'. This may improve the readability of the image description in an image.

If you set check-mark 'Remove top bar'. the top bar will become transparent and the top of the image can be extended to the top of the viewport. However possible text and buttons on this toolbar are still visible.

With the default behavior of the PhotoSwipe light-box the information on the top bar disappears if you move the mouse cursor on a PC out of the window or after 4 seconds. If you like to see the information longer, set check-mark ‘Show top info minimal 10 sec’.

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

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 appearence' group. This group contains the same controls as already discussed on the Skin settings - General tab.

If check-mark 'Show image counter in the upper left corner' is set, the default PhotoSwipe counter information is showed, like '2/5'.

Thee next 3 fields define other information which can be displayed instead of or right of the counter.

If check-mark "Show 'Title' in the upper left corner" is set, contents of the jAlbum Explore 'Title' field is displayed:


If default contents of that field is the file name without a file extension. But you can enter a instead as is shown above.

If check-mark 'Show file name in the upper left corner:' is set, the file name is show right of the preceding 'Title' information or instead of the 'Title' information. The file extension is added if check-mark 'with file name extension is set.

If you change nothing in a 'Title' field, it makes of course no sense to set both the 'Title' check-mark and the 'File name' check-mark!

Note that the contents of the jAlbum 'Comment' field below a picture in the jAlbum Explorer is displayed as the description of the slide. All text behind "..." in a comment is displayed in description of the picture if you click on the "More info" link at the end of the initially displayed description.

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 pictures is exposed. You can  select this function also in the menu.

Check-mark 'Hide Fullscreen button' allows you to disable this feature.

Check-mark '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.

A 'Play' button to start a slide show will be added in the upper right corner if check-mark 'Show Slide Show button' is set. Select the default viewing time per slide in the next field. The viewer can change this value in the Viewer settings window The slide show stops after the last picture or it can loop, depending on the check-mark 'Stop after the last slide'. 

Set 'Use 'Tap image' to start/stop Slide Show on mobile devices' if you don't like to use that corresponding small button in the upper right corner to do that. This is not possible on a PC, because the image click function is used for zooming. However the same action is possible on a PC by using the space-key on the keyboard.

With check-mark 'Show Menu button in the upper right corner' you can hide the curved arrow menu button. If this is cleared, you can select in group 'Enable next Menu items', which items you like to see if you click the menu button.

The first four check-marks are share actions for social media. 


Option "Replace web location slide image by the web site" requires jAlbum version 14. If set, the web location slide image is replaced by the opened web location and navigation buttons are showed in the left and right borde of the website. To see it, click on the first thumbnail of this album. If not set, the web location is opened in a new tab by clicking the 'More info' link in the upper left corner of the web location slide image.


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

If the GPS location is available in the EXIF data block of the image and on the Advanced/Metadata tab the check-marks 'EXIF image Desc.' has been checked, you can add a 'Show location' menu item to display the GPS location in Google Maps. To do this check the 'Show location in Google Maps' check-mark. 

If check-mark 'Download image' is set, a  'Download image' menu item is added. Which quality is used for the downloaded image depends on the Album Settings - Pages.

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

In the 'Show in description' group you can select the items you like to see displayed below 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 'Keywords:' prefix.  For aan example click here. On the bottom you see in the slide image description the Title, the Keywords and the Comment. The File name is displayed in the upper left corner.



Skin settings - Map


The photo location can be displayed with Google Maps if the 'Show location button for Google Maps' check-box is set and the Photo 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:

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.

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 the slide location.

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' tab:

Enter here the URL of the mp3 track or copy the mp3 file to the res folder by clicking the 'Select' button and browsing to the MP3 file you like to use.
You can play that mp3 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 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 plasy background music:

There are 4 methods to play background music:
  • By selecting the mp3 track on the music tab displayed above. If you use this in an album with folders, the music stops if a folder album is opened. For an example see the sample album.
  • You can also use the new Music.htt web-page to start the background music. In that case the music continues if a folder album is opened. For and example see my Scandinavië 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 should not rename the Music.htt or Music.htm(l) file.
  • You can also set the new check-box 'Use this file name as default MP3 file in the root and folder output directories'. Each output directory should in that case contain an MP3 file of the same name, but the contents may be different. The root and folder album play in that case each his own track. For an example see my Terschelling album.
  • It is also possible to indicate the background music in file music.inc, which should contain in that case the html5 code of an audio control. For an example go to my Pieterpad album and open there a folder album. This include file contains the code showed in next screen-shot:


Miscellaneous points


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 the Slide Show 4 skin 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:
  1. page-header_all.inc in the head section to include links and/or css code and/or js code in the root album and all folder albums.
  2. page-header-folder_0.inc in the head section to include links and/or css code and/or js code in all folder albums. The code is inserted after the code of the page-header_all.inc file. This file should be saved in the root-image directory, it generates code in all index.html files in folders.
  3. page-header_0.inc in the head section to include links and/or css code and/or js code in the root album. The code is inserted after the code of the page-header-folder_0.inc file.
  4. page-header-folder_1.inc in top of the index page section after the body tag for extra html for example a navigation menu. This file should be saved in the root-image directory, it generates code in all index.html files in folders.
  5. page-header_1.inc in top of the index page section after the body tag for extra html for example a navigation menu.
  6. page-header_1_all.inc in top of the index page section after the body tag for extra html for example a navigation menu. This file should be saved in the root-image directory, it generates code in all index.html files in the root directory and in folder albums. Available in PhotoSwipe version 1.6.1 and Slide Show 4 version 4.1.2
  7. page-header-folder_2.inc above the caption of the index page for extra html code. This file should be saved in the root-image directory, it generates code in all index.html files in folders.
  8. page-header_2.inc above the caption of the index page for extra html code.
  9. page-footer_2.inc between the description and the optional buttons on the index page for extra html code.
  10. buttons.inc after the standard buttons, to add more buttons or another horizontal menu bar.
  11. page-footer-folder_0.inc at the bottom of the index page for extra html code.  This file should be saved in the root-image directory, it generates code in all index.html files in folders.
  12. page-footer_all.inc  at the bottom of the index page for extra html code.  This file should be saved in the root-image directory, it generates code in all index.html files in the root-image directory and in folders.
  13. page-footer_0.inc at the bottom of the index page for extra html code.
  14. page-header_all.inc also at the top of the index page for extra html code like page-header_1.inc but both for the root page and all folders index pages.
  15. slidepage-header.inc at the top of a slide page in a Slide Show 4 album only.
  16. slidepage-header_all.inc at the top of a slide page in a Slide Show 4 album only. This file should be saved in the root-image directory, it generates code in all slide pages in in the root directory and in the folder albums. Available in Slide Show 4 version 4.1.2
  17. slidepage-footer at the bottom of a slide page  in a Slide Show 4 album only.
  18. music.inc at the bottom of an index page, to play background music, see the music settings.
  19. It is also possible to insert css code at the begin and/or at the end of the common.css file by placing a file inc_at_begin.css and/or inc_at_end.css in the root image directory.
Click here to see a demo album with various .inc files.

I use mostly only these files:

  • buttons.inc for extra buttons on the index page, like in this example, which was made with this code:
  • page-footer_0.inc for vistors counters.
  • page-header_0.inc for Google Analytics code.
  • page-footer_all.inc for Google AdSense code
  • page-header_2.inc can be used in a sub-folder album to display a theme image in such an album:
  • page-header_all.inc to add the Google Translate plug-in to an album:
See this album with folder albums for an example. For an album with folders, the plug-in should be inserted in the top album and in all folder albums, if the whole site should be translated. The plug-in fetched from the Google Translate plug-in website with two additions:  
  1. code to indicate where the language selection box should be displayed. For example  style="position: absolute top: 200px; left: 20px;"
  2. code to hide the plugin for small devices like an iPhone. The selection box an such a device is so small that you can't use it, so I hide it on those systems with the code if (screen.width > 400) {   ...  }
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 buttons insert the first javascript code in file page-footer_all.inc for both the PhotoSwipe skin and the Slide Show 4 skin.

For 'Expanding' sharing buttons, this is all, an share button will be displayed in the lower right corner of all pages.

In case you implements the 'Inline'sharing buttons, add the next adapted code of div tags for the position of the buttons

<div class="addthis_inline_share_toolbox_r2f8"  style="position:absolute; top:40px; left:1px; z-index:20000"></div>

in file page-header_1_all.inc. This positions the buttons in the upper left corner of the index page and for the PhotoSwipe skin also in the slide page. For the Slide Show 4 skin you have to put this code too in file slidepage-header_all.inc to show the buttons also on the slide page. The root album and all folder albums will show now your selected inline AddThis share buttons in the upper left corner. For the Slide Show 4 skin I use value top:40px; and for the PhotoSwipe skin top:8px.
To see his buttons open this PhotoSwipe album or this Slide Show 4 album.

In PhotoSwipe version 1.6.1 and Slide Show 4 version 4.1.2 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, see  this PhotoSwipe album or this Slide Show 4 album. These examples are simple albums without folder albums using inc-files page-footer_0.inc, page-header_1.inc and slidepage-header.inc.

If you require a special inc page for a specific album, put the inc file in the images directory. If you like to use an inc file for all your albums, put the inc file in the Slide Show 4 skin directory. For an example of the effect of these include files, see my testalbum


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 Makemapfrom my software download page.

To read the online-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 contains also a function to enlarge panorama photo’s for the Slide Show 4 skin, but it is now better to do that in jAlbum with user variable 'maxImageWidth=30000'.

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

You can download program EditPhotoInfo from my software download page.

To read the online-help file click here.

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

Geen opmerkingen: