18 september 2013

Slide Show 4 and Improved Slide Show 3 skins

This is an old manual, the Slide Show 4 manual for version 2.0 or later is here.

Everything what was possible with the 'Improved Slide Show 3' skin is now also possible with the 'Slide Show 4' skin, which is more compact and does not show flickering-en. Therefore the maintenance of the 'Improved Slide show 3' has been stopped and many points discussed below are only valid for the  'Slide Show 4' skin.

Both skins 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 below! With Google Chrome, Firefox and Safari you can click the buttons and thumbnails in the frame below, but not with my Internet Explorer version. To test it with the Internet Explorer click here to go to the normal web page.

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

This version shows an improved user interface and adds extra possibilities for the display of GPS locations in Google Maps. There are special pages for the display of wide panorama photos. Movies are now supported with jAlbum version 11 or later in Slide Show 4.

The following changes and additions are made in the Slide Show 4 skin with respect to the original "Slide show" skin vs.2:

1. The generated html files are now HTML 5 compliant; they are tested with the W3C Markup Validation Service: http://validator.w3.org/

2. The size of a displayed image may be limited to the natural height and width of  image in the JPEG file, but this can be overruled by the viewer by chosing in the settings 'Enable over-sized images: yes'..

3. 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 or on a touch device with a long tap on a thumbnail. However if you check the 'Show filenames' check-box field on the 'General' tab:

the file names will be displayed as in Slide Show skin vs.2. If  "Show Facebook buttons' 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.

4. The index page window name field should only be filled if you build a tree of albums and this is the top album which should stay open, because it plays background music and shows the links to other album. For more info and an example, see point 18.

5. The viewer selects the time interval per slide and the desired transition effect in the windows which is opened via the settings button in the upper right corner of the index page. Six transition effects are available and he/she can also select no transition effect (none) or All (a combination of all possible effects, randomly selected per slide). If a transition effect is selected, the duration of the effect can be selected via the next selection box.

6. The settings applied by the user are saved in the html 5 local storage if a slide is opened.

7. You can display the 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 "Use slide show embedded" on the general tab. Normally this check-box is not set and the slideshow comes 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.

8. 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 on the general tab, 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 these changes values are saved for next time.

9. You can put a border around a slide image in the color you select after 'Slide image border color:'. Enter the border width in the next field (0-99 pixels). In the same way you can put a border around the thumbnails of the index page. a thumbnail of a movie gets his own border color.
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 boder widths to 0 if you use that.
If you check the check-mark 'Fixed-shape thumbnails', all thumbnails do have the same size as defined in the jAlbum settings Pictures / Thumbnails format. See also point 27.
Three other color fields defines the color of the background, the text and the hyperlinks of all pages and 2 color fields define the color of the description text for a slide.
You can also use a picture as background for the index page and the slide pages. Click on the 'Select button' to select the image for a background.
You can force a fixed top position of the slide image. To do that enter a position after "Used fixed slide top at:". This position should be >= 0. Leave this field empty if you do not use it. You can use this in albums embedded in an iFrame, where the frame height may exceed the screen height.

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

11. 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 other 6 types below the picture, 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 'Slide description in border text color:' is used for the description below the image. For the other 4 'Show description'types is the text color defined by field 'Other slide description text color:'.

I fetch the description from the EXIF data in the photo, so on the Advanced/Metadata tab I have checked the check-marks "EXIF image Desc." and "'Include photographic data in generated pages" and after "Title Source" I see: "IPTC Object Name":

But you can get the description from other sources, the JAlbum documentation says:

The Comment will either be extracted from (as soon as found):
1. An external "texts.properties" file.
2. The JPEG comment section of an image file.
3. The IPTC caption section of an image file. See note 3.
4. The EXIF user comment section. See note 3.
Note 3: Only exists for images containing EXIF/IPTC data and if EXIF extraction is turned on

12. The comment is ignored if it is equal to the contents of the corresponding field on the 'General' tab. 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.

13. The contents of field 'Middle footer text' is displayed at the bottom of the index page. That is also the case with the 'Right footer text' field.

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

15. 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 link on the photo page to display the GPS location in Google Maps. To do this select the the type of map you like to see in the Google Maps page and check the 'Show location in Google Maps' check-mark on the General tab.

16. If the user variable title is not defined, 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.

17. If the Album description is not empty, this description will be displayed below the pictures on the index page. A problem with cr/lf and " and \ characters in the description has been fixed in version 3.9.3

18. The first 'Parent page' link on the 'Links' tab:

defines a link to another page via an up-arrow icon on the top op the index page. If the first two fields are empty, no up-arrow icon will be visible. Normally you use only the first '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 leave the first field empty and give the window name of the top parent page in the 2nd field. Click here for an example of such a tree of windows. You will see that the settings selected by the user in the parent page, are copied to the child pages.

18a. You can display an extra page in a frame on the index page. Thgis is defined by the next 3 fields.
 If you like to use that you have to fill field 'Extra page URL' with the adddress od the extra page. That page should be a html file created with a text or html editor. For an example see the sample album where the extra page can be opened here.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 contain the address of the image, which wil be displayed to the left of the Help icon. The text in the next field 'Extra page button text or hint' is used as hint message. If the  'Extra page button image' is emplt, you will see a button with the text given in field 'Extra page button text or hint'. If both fields are empty, the extra page can be displasyede by clicking a button or image in an include filke. That button or image tag should have the id openclosePage. For an example, click here.  The html code for the ABOUT ME link in that example is:  < a href="#" id="openclosePage"> About me</a >

19. Maximum 6 links can be displayed as buttons at the bottom of the index page.
The links are defined on the 'Links' tab. A link will be shown  if the corresponding URL field contains a text.
The 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 18 or more pixels if you like to display your album on a small device like the iPhone.
The first and last link are default the links to preceding and following albums. If one of these two buttons is clicked, the current index page is closed and replaced by the page at the URL address. The same applies to the default Home link. The other three links will open the page at the URL address in a new window and the current index page is not closed. The link Home is default a link to the Home page. 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, but you are free to connect other functions to all 6 buttons. If you choose to connect an other function to a button, you probably should not check the check-mark, because the icon will probably show the correct symbol for the new function (unless you relace the standard 50x50px png image in the res folder by a new image). You can combine icons and buttons as you see in the sample album of the Slide Show 4 skin.

20. The 'Links' tab contains also a field to display a profile image below these links. The value is the URL of the image. I use it to show the profile of a GPS track, see the example album above.. Leave the field empty if you don't like to display an image under the other links.

21. The flash player will not work on the iPad, so that is no longer supported in the Slide Show 4 skin. 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, Google Chrome and Safari. The current FireFox browser 6.0.2 cannot play mp3 file with the html5 player.

22. Standard for every album is a res folder generated for the resources like the buttons and the css files, but this skin 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.
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 de 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.

23. Movies can be combined with photos in a slide show with the Slide Show 4 skin. If a movie is loaded the slide show 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. However jAlbum vs 11 converts all video formats automatically to mp4 format which is supported on the iPad and most other devices.
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.

24. Navigation and control is possible via buttons on the screen, but also via the keyboard on a PC and via one finger swipes on the iPad. If navigation buttons are visible and you stopped the slide show, you can enlarge (zoom) the picture: Place 2 fingers on the screen and move them apart. Put two fingers on the screen and move them together to un-zoom. Via a help button on the index page  you get a window with a description of the user interface. If the shown language is not your language, you can always see the English help text by clicking the 'Show English help page' button on top of the Help window.

25. To put more emphasis to the photo in a slide show a viewer can hide the navigation buttons on the screen, via a selection box in the settings window on the index page. Do this for an embedded slide show with the selection box on the general tab, see point 8. If you are not interested in Sharing slides on your Facebook page, you can also hide the Share button above the slides via a selection box in the settings window on the index page.

26. All input controls are now selection boxes, to offer easy input for a viewer both on a PC and on an iPhone / iPad.

27. You can define the shape and layout the thumbnails on the General tab.
If you check the check-mark 'Fixed-shape thumbnails', all thumbnails do have the same size as defined in the jAlbum settings Pictures / Thumbnails format.
You can put a border around the thumbnails on the index page 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 movie gets his own border color.
If you like rounded corners, enter a value > 0 in  'Thumbnails radius'.
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.
Finally you can insert space between the border and the image by entering a value > 0 in field  'Thumbnails space to border'.

28.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. With jAlbum version 10.10.2. this widget block is automatically added, also if you did not select it, leading to pop-up advertisements for sides without a licence. To prevent this auto injection of widgets is disabled in version 3.9.15. To uses widgets, you have now first to select check-mark 'Allow widgets' on the general tab.

29.The slide pages of the 'Slide Show 3' skin can no longer be compressed to one new file slidePageSS3.html with my program EditPhotoInfo, so use the Slide Show 4 skin instead.

30. Predefined styles have been added: Black, Gray, Gray-Textile and White. Use style Custom if you like to define your own colors and/or background image.

31.Version 1.4.4 introduces the use of the following optional include files:

page-header_0.inc in the section to include links and/or css code and/or js code can now be added,
page-header_1.inc in top of the index page section for extra html for example a navigation menu,
page-header_2.inc above the caption of the index page for extra html code,
page-footer_2.inc between the description and the optional buttons on the index page for extra html code,
page-footer_0.inc at the bottom of the index page for extra html code,
slidepage-header.inc at the top of a slide page and
slidepage-footer at the bottom of a slide page.

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 file, see http://andrewolff.jalbum.net/testjalbum/

32. If the album contains wide (panorama-) pictures, an expand icon is, in version 1.6 or later version, automatically added in the upper left corner of the slide page, 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 the slide show with a long tap on the picture. To see an example click here
For panorama pictures it is advised to enlarge the slide pictures, after the generation of the album, to a height of for example 800 pixels with my program EditPhotoInfo version or later version (Function 'Make web page for panorama photo'). You can also use a large format for your pictures, like 2560x1080 in the jAlbum project settings.

33. With my program EditPhotoInfo it is also possible to add expansion buttons for panoramic photos in separated html files. Program EditPhotoInfo adds in that case an array panFiles at the end of the slidePage.js file generated by the Slide Show 4 skin. The array panFiles contains the URL's of expansion pages or '', if no expansion page is used.
With my program EditPhotoInfo version or later version, it is also possible to add a link to another location like a 360 degrees panorama uploaded to 360Cities.net as is done in the given example.
To see this effect click here
The 6th picture can be expanded to a page generated by program EditPhotoInfo and the 10th picture can be expanded to an uploaded panorama of the 360Cities.net site. With the newest version of the Slide Show 4 skin, it is advised not to make separated html panoramic webpages, but only to enlarge the picure generated by the jAlbum program.

In the sample album the following fields are filled as shown in the screenshots above. The sample album was made with slide picture format 1920x1920 and JPEG-quality 50.

You can download the 'Slide Show 4' skin from jAlbum Slide Show 4 skin page.

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 and it can replace the above mentioned place mark with links to this location.

You can also make a map.kml file to show in Google Earth and Google Maps the locations where the photos are made. In version 4.1 and later versions it is possible to make links to the corresponding slide pages in the way-point windows.

The program contains also a function to show panorama photo’s with these skins, click here to see an example.

The program can de used to add a description to a photo and save the description in the EXIF data block of the photo.

'Slide Show 4' skin version 1.3 or later versions requires version or later version of program EditPhotoInfo.

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