Blog André Wolff

 

This jAlbum skin is based upon the "Slide show" skin vs.2.

It is a small skin which gives maximum attention to your photo's, because it can fill your whole monitor or TV screen with your photo and the focus is not lead away by other small pictures or text.

The viewer has full control over the slide show via selection boxes in the top right corner of the index page:


The upper part of this image shows the display on a PC and the lower part shows the display on a mobile device like the iPad.

Example of a full index page without music player and parent link:


This version shows an improved user interface and adds extra possibilities for the display of GPS locations in Google Maps and Google Earth. There are special pages for the display of wide panorama photos. Movies are are supported: the slide show stops automatically if a movie is encountered. Transtions effects are also added.

The following changes and additions are made with respect to the "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 is never larger as the dimensions of the JPEG file; the standard Slide Show skin vs.2 shows a distorted picture if you show a small picture on a very large monitor or TV screen.

3. Default no filenames are displayed below the thumb nails of the index page, but you can see the filename in the yellow mouse tip if you move the mouse cursor over a thumbnail. However if you check the 'Show filenames' check-box field on the 'General' tab:



the filenames will be displayed as in Slide Show skin vs.2. If the "Show 'Like' facebook button' is checked, a 'Like'button is displayed on the index page.

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 via a selection box in top right corner of the index page (see the screendumps above). 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.

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. Click here to see a description of these techniques.

8. The viewing time per slide, the applied slide transition effect, transition effect time and whether the navigation buttons should be displayed on slides 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). Three other color fields defines the color of the background, the text and the hyperlinks.

10. The slide show stops after the last picture or it can loop, depending on the checkmark '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 4 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.

I fetch the description from the EXIF data in the photo, so on the Advanced/Metadata tab I have checked the checkmarks "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 secion. 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. If field ‘Copyright’ on the 'General' tab contains a text, this text is displayed as the copyright information on the index page

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 checkmarks "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' checkmark on the General tab. If you do not check the checkmark, a place mark is added for the GPS location. You can replace that later by a link to Google Maps and Google Earth with my program EditPhotoInfo vs. 4.0.6 or later, which you can install from my software download page. If you make the link with my program EditPhotoInfo, it is possible on an iPad to show the location in Safari, if you do it with JAlbum it is displayed in the iPad Chart App.

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 pictogram in the upper right corner. If the first two fields are empty, no up-arrow pictogram 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 descendent 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.

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 as a button if the corresponding URL field contains a text. The text on the button is equal to the text entered in the button text field in front of the URL field.
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 5 buttons.

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 sample album for this skin. 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. To play music on the iPad you can chose to play one track with the html5 audio player. To use the html5 player, enter the URL of the mp3 file in the 'mp3 file' field and un-check the 'Add music with flash music player':


You can also copy the mp3 file to the output folder (the folder with the index.html file) and enter just the name of the MP3 file in this field. This works 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.

23. Movies can be combined with photos in a slide show. If a movie is loaded the slide show stops and the movie starts automatically, except on the iPad 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 QuickTime are supported on the iPad. This includes the native .mov format used when a movie is made with the iPad2 and the mp4 format.

24. Navigation and control is posible via buttons on the screen, but also via the keyboard on a PC and via one finger swipes and two fingers gestures on the iPad. Put two fingers on the screen and move them together to close the slide show and return to the index screen (2 finger pinch close gesture). 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 or the H key on a slide page you can pop-up a small window with a description of the user interface.

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 on the index page. Do this for an embedded slide show with the selction box on the general tab, see point 8.

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

If you used an old version of this skin, remove all lines on the Advanced / User Variables page!

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

You can download this skin from my jAlbum skin page.

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.

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

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

You can download this program from my software download page.

Version 4.0.9 or later is required for version 3.9.8 or later version of this skin.

To read the online-help file click here.

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

Known problems in this skin:

If you use transition effects in slides with a dark background with the IE9 or Chrome browser, you see sometimes image flickering on a Windows PC.
You can avoid this as follows:
1. Use another browser: the latest versions of Safari and FireFox do not show image flickering.
2. Do not select a slide transition effect.
3. Use a light background.
4. Use an iPad instead of a Windows PC.

Labels: EditPhotoInfo, Improved Slide Show 3