30 augustus 2016

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 or it is indicated which key you should use to get a full screen display.

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) and Disable music autoplay.

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 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 the Play button in a Slide Show 4 album, a slide show starts:

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: Open the menu strip, 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 menu button or use a swipe-up on a mobile device or the M-key on a PC, an extra information strip becomes visible:


The skin shows here always the file name of the photo and optionally more share and information buttons. If selected for the album, it shows here too the Camera information. Functions of the shown buttons: Mail Share this photo, Facebook Share this photo, Show location in Google Maps and Download this photo. This are all optional buttons which may be selected in the Slide Show 4 slide page settings. Close this window by clicking somewhere in the text or click again the menu button.

If you click a button in a PhotoSwipe album album, the photo is enlarged:

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_PST ^) to see …".
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 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 to the menu page of the slide (Slide Show 4) or a menu item  'Show Download image' will be added to the menu (PhotoSwipe) to download the hi-res image (max 2048x2048) to your disk. The original photos will be downloaded if option 'Link to originals via scaled images' is selected and check-box 'Copy originals' is set and the scaled down image used to display the slide is downloaded if 'Link to scaled down images'is selected.

In the past I did use maximum 28 thumbnails on an index page (7 columns and 4 rows), 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. Make the contents of 'rows' large, for example 80 if all thumbnails should be displayed on one page. This is now my preferred way of working, with option 'Table with variable # of thumbnails / row' set on the Index page / Thumbnails settings tab. You see the result of this check-mark in the iPad and PC screenshot of the album index page above.

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).
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 panoramic pictures, click here

With the PhotoSwipe skin you can enlarge the panorama by double clicking in the slide on a PC or on a touch screen by keeping your finger and thumb on the screen, simply move them away from each other, expanding the space between them. As you expand your fingers, the screen will zoom in. Next scroll with one or two fingers through the panorama. To zoom out, simply do the reverse: move your thumb and index finger towards each other while keeping them pressed to the screen.

For panorama pictures it is advised to enlarge the corresponding slide pictures, to a height of for example 1080 pixels. You can do that with the jAlbum program by defining user variable maxImageWidth=30000 for a panorama image. This has been described in my blog '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 you can define a link to another location like a 360 degrees panorama uploaded to 360Cities.net:

To see this effect click here, and next click the 8th thumbnail. This is not (yet) possible with the PhotoSwipe skin.

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.

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 M, F, L etc to open the menu, open the Facebook share dialogue, display the location (if selected and the replaced image did contain GPS coordinates) etc.

If I do not select option 'Table with variable # of thumbnails / row' 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', I normally clear check-mark 'Fixed-shape thumbnails' and use as thumbnails size 1000x80.
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.

I add slide descriptions and GPS location data with my EditPhotoInfo program.

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

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 my Blog.  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. 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. 

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.

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.

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.

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 'Repeat background image' if you use a small background image.

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.

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.

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 four 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 


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

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 in the menu strip above that slide (Slide Show 4) or via a 'Share on Facebook' menu item (PhotoSwipe).

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 

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

In the Theme Image field you can enter the name of the theme image 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. The note 'How to implement albums with a theme image with the Slide Show 4 skin' describes the whole procedure and gives examples.
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 98%. If you apply shadows around the theme image, you should always 98%, 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'.

Due to the responsive design of both skins, the size of most images is adapted to the screen size of the display device. If you use a small screen on a mobile device like the iPhone, the theme image may take so much space that there is hardly room for the thumbnails. With field 'Hide Theme image if screen height < '
 you can decide to hide the theme image if the device height is too small. The skin reads the screen.width and screen.height of the used device and selects the smallest of the 2 values as screen height (because you can rotate mobile devices). If the theme image is hidden, the album title is showed in the standard text color instead in the selected text color. 
I use mostly wide panoramic theme images so that there is sufficient room for the normal thumbnails on a small device. So I leave this field empty and use the theme image in that case as swipe area (see 'Allows swipes' field above).

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



Skin settings – Index page / Thumbnails 



With option 'Table with variable # thumbnails / row' check-box, the number of thumbnails on a row will be reduced if the screen width is reduced., see here for an example.

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.

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.

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.

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

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.

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, 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 EditPhotoInfo helpfile), 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.

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

If you clear check-mark 'Show Menu button in the upper left corner', the hamburger icon to open the menu strip will not be displayed. In that case you can still open the menu strip on a PC with the M-key and on a mobile device with the swipe-down gesture.

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

With the check-marks in the group 'Enable next Menu items', you select the information to be displayed above a slide if you click the menu button in the upper left corner of a slide page. 

If you set check-mark 'Camera data', the most important EXIF information of the photo and the camera is showed. The background color defined on the General tab defines the background of the text; if you use an image as general background, you should set the background transparent, to see that image behind the text.

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

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 menu strip 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.

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

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 field 'Text 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 'Box 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:'.

You can put a border around a slide image in the color you select after 'Slide image 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.

It is also possible to use frames and border made with jAlbums eXtended Border filter as has been described in this Blog message. 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.

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.

If the check-mark 'Show initially only 3 lines of long descriptions' is set and the slide description is longer as 3 lines ( or if the slide description is at the top of the page and the the height is > 50 pixels) the system shows initially not all text and vertical scroll bar is displayed.  This scroll bar is not visible on mobile devices like an iPhone or iPad, but you can still scroll on these devices with 2 fingers. It is also possible to expand the full description by clicking the into description. If a description can be expanded it is shown in italic font on a mobile device; on a PC you see a scroll bar at the right site of the description. To test it open the movies test album and next click the 6th thumbnail.


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 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 'Comment' field is displayed at the bottom of the slide window.

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. 

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 last group 'Show Exif info below the slide image' allows you to show Exif information below the photo description.

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 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 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.
Because the iPad does not support flash, only movie formats supported by the jwPlayer vs 6 can be played in the Slide Show 4 skin. However jAlbum vs 11 converts all video formats automatically to mp4 format which is supported on the iPad and most other devices.

The PhotoSwipe skin plays videos only in the browser, which can also be selected in the Slide Show 4 skin by setting check-mark 'Use browsers native video support' on the Skin settings - General tab.

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

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-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.
  7. page-header_2.inc above the caption of the index page for extra html code.
  8. page-footer_2.inc between the description and the optional buttons on the index page for extra html code.
  9. buttons.inc after the standard buttons, to add more buttons or another horizontal menu bar.
  10. 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.
  11. page-footer_0.inc at the bottom of the index page for extra html code.
  12. 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.
  13. slidepage-header.inc at the top of a slide page in a Slide Show 4 album only.
  14. slidepage-footer at the bottom of a slide page  in a Slide Show 4 album only.
  15. music.inc at the bottom of an index page, to play background music, see the music settings.
  16. 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.

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

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.

You can download program EditPhotoInfo from my software download page.

To read the online-help file click here.

On my blog you can find a recipe for the whole procedure (in Dutch).