12 december 2012

Slide Show 4 and Improved Slide Show 3 skins


The information below is mostly also applicable for the new 'Slide Show 4' skin, but the compression of the slide show pages to one new slide page is in the 'Slide Show 4' skin done by the jAlbum program. 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

The jAlbum 'Slide Show 3' skin is based upon the "Slide show" skin vs.2. Skin 'Slide Show 4' is derived from the 'Slide show 3' skin version 3.9.20.

Both skins gives 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 selection boxes in the top right corner of the index 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 and Google Earth. There are special pages for the display of wide panorama photos. Movies are now supported in both skins, but for jAlbum version 11 or later only in Slide Show 4.

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 file names are displayed below the thumb nails 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. 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 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 screen dumps 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. 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 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). In the same way you can put a border around the thumbs of the index page. a thumb of a movie gets his own border color.
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 same or another page as background for the slide pages. Click on the 'Select button' to select the image for a background.

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. 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 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. If you do not check the check-mark, 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 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.

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 (starting with 'http://') in the 'mp3 file' field and un-check the 'Add music with flash music player':


You can also 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.

23. Movies can be combined with photos in a slide show both in Slide Show 3 and 4. If a movie is loaded the slide show stops and the movie starts automatically, except on the iPad 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.
With jAlbum version 11 it is no longer possible to handle movies with the 'Improved Slide Show 3' skin, so you bettter update to the 'Slide Show 4' skin.

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 or the H key on a slide page you get a window with a description of the user interface. If the help language is not English, 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 on the index page. Do this for an embedded slide show with the selection 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.

27. You can define the cell width for the thumb nails in field "Thumbs cell width" on the General tab. If you enter the value 0, the system uses the smallest value for the selected thumbs format.

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 be compressed to one new file slidePageSS3.html with my program EditPhotoInfo. This makes the space required for the album smaller, but more important because there are no page changes, it removes the flashes you see sometimes in the slide show on a Windows PC with the Internet Explorer and the Google Chrome browser. Click here to see a description of this process.
For the 'Slide Show 4' skin it is automatically done if the album is created by the jAlbum program.

30. Predefined styles have been added in version 3.9.20: 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.1 introduces the use of the following optional include files:

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.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://www.andrewolff.nl/testjalbum11_SS4/

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

Finally EditPhotoInfo enables you to compress the Slide Show 3 slide pages which removes the flashes you see sometimes on a PC if you play the Slide Show album with transition effects in the Internet Explorer or Google Chrome browser. Albums made with the 'Slide Show 4' skin are already compressed by the jAlbum program.

'Slide Show 4' skin version 1.3 or later versions requires version 4.2.4.1 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 voor the whole procedure (in Dutch).

Geen opmerkingen: