First of all a big THANK YOU to Philip J. Guo for creating the JSON-PHOTO-GAL Program.
When I wanted to update my outdated (1-html-file-per-photo) website in 2011, I started by defining an XML file describing all the photos. Using XSL I did create something, but was not happy about it. Then I found Philip's XML Photo Gallery Project and played around with it and it already made my photo-site a lot better, but on his site he also talked about his JSON Photo Gallery project, so after a while I tried that and am very happy I did. Here is an example of Philip's JSON Photosite.


Changes in  April 2017:
  1. Added 'Enter'-key to 'open' the upper-left thumbnail of the selection screen. It does exactly what a mouse-click would do, so e.g. it opens a sub-show or shows the larger photo or downloads a file, whatever was coded for that upper-left thumbnail.
  2. Bug fix: sometimes the text related to clicking 'o' to view original size of a photo did not disappear when it should. Fixed now.

Changes in  March 2017:
  1. Introduced a download node for the json files, so that one can download a file, example: "download": "downloads/ebooks/Bob Dylan (LRX).epub".
  2. Added button to stop audio, so one can now also stop audio on a Tablet. Button only shows up when audio is played. Pressing Esc also stops the audio.
  3. Changed the 'Main Index', 'Show All' and 'Stop Audio' button from graphic jpg-files to pure CSS-handled 'buttons'. Works and looks perfect !

Changes in  February 2017:
  1. A bit more calculation to decrease image size (see point 3 below) to also decrease when height is too large.
  2. Started working on concert pictures (and wanted some music to accompany), so changed the already available sound-part completely.
  3. Introduced non-documented :-) 'd' shortcut to see the image-size for the displayed picture.
  4. Managed to get double-clicking on Android and iOS devices also to work (enlarge picture to original size, see point 5 below).

Changes in  January 2017:

Made json_photo_gal6 the main website-engine and therefore added some extra features in both the javascript- and the css file and changed the name back into json_photo_gal (thus without a version number).
List of new features and changes:

  1. The very first screen can have larger (than the normal 130x100px) thumbnails. Program knows that there is no previous gallery so that's how it detects the 'start-screen'.
  2. Introduced a hlink node for the json files, to link to something, example: "hlink": "http://www.foto-webcam.eu/webcam/dobratsch/".
  3. Lately I uploaded larger size pictures. They are now downsized to fit into the browser-window.
  4. When this said downsized picture is shown, a message in the heading tells you to click on the picture (or keyboard 'o') to see the original size and vice versa.
  5. A picture with a yellow border means you can see the location on GoogleMaps. Because of the click to original size, as stated in the previous line, you now have to double-click (or keyboard 'm') to see the position on a Map. Unfortunately this does not work on Android and iOS devices yet. Sorry !!
  6. Managed to correct the sending of emails when clicking on the copyright info (under the picture) (or keyboard 'w').
  7. Added info to the 'm', 'o' and 'w' shortcut keys to the Help-info.
  8. Version nummer of the main JavaScript file is now displayed in the Help-popup as the 'Main JS-file Last Updated' date.
  9. Version date of each individual json file (= subshow) now displayed at the very bottom of that subshow.

Version  json_photo_gal6:
  1. 2016-October: Introduced Esc keypress to go back from one large picture to all thumbnails (same as s, but only one-way) + small change in Help-screen.
  2. 2016-August:
    • Added possibility to swipe Left and Right for tablet & mobile use (thanks to Andreas Waltl, netCU Internetagentur).
      Unfortunately at the moment this only works in Chrome and Android, as far as I could test.
    • Added shortcut-key d: debug-toggle: when on, it shows build-in alerts, at the moment it only shows the size of the photos etc.
    • Added shortcut-key o: original-toggle: when on, it shows original size of photos and does not shrink size when window is smaller than photo-size.
      Found this useful, especially when looking at panoramas (yes, you then have to scroll, but at least you see it better).
    • Made it possible to have 'remarks' in the JSON file, i.e. nodes in the file that will be treated as remarks, thus those nodes are not part of the slide-show.
      Normally this is not possible in JSON files, but here this is done by having the filename start with 2 slashes, e.g.: "filename": "//2009.jpg".
      Enhanced this a bit, so following is also possible: having no filename entry at all, use another name than filename, e-g. "xfilename": "2009.jpg" or any other change in the "filename".
      Found this especially useful when creating sub-shows (child) where the show is not ready yet. so instead of updating production-server by taking out the complete node, you just 'do something' to the filename or insert // at the beginning of it.
  3. 2016-July: Undid the 2014-March change and instead when pressing key, program now shows next- or previous sub-show (depending of course on which key or arrow was clicked).
Version  json_photo_gal5s:
  1. 2014-March: Took away left-arrow on first foto and right-arrow on last one.
  2. 2014-February: You now see- and can click on, the thumbnails of the previous and next show.
  3. For this I had to do a little bit of recoding, especially the part that picks up those thumbnails.
    Therefore, from now on, all thumbnails that lead to a 'child' (a subshow) have to be in the galleries/index/thumbnails directory and those files have to have the same name as the corresponding json file !!
Version  json_photo_gal4s:
  1. 2013-September: When I bought a Tablet, I noticed that I needed good 'buttons' to move forward and backward, because Tablets dont have left- and right arrows !
    So I added said buttons and took away the very tiny [Prev] and [Next] buttons (not usable on a Tablet).
Version  json_photo_gal3s:
  1. Possibility for two languages in the JSON files and to switch between them.
  2. Added some useful keyboard shortcut keys (especially useful on SmartPhones that have a keyboard).
@1. A few changes were necessary in the JSON files:

"title" was replaced by "title1" and a new tag, "title2" was added.
The same is true for ""galleryName" and "description".

Toggling between them is done by clicking on the respective country-flag or by shortcut keys '1' or '2'.

So what can be in different languages:

I did not bother to have 2 language versions of the 'short titles', the info under the thumbnails, because those small pictures more or less speak for themselves !

Please see also the tables at the bottom of this window to see all possible tags !

@2. I added the following keyboard shortcuts:

h or F1= Help (lists the various shortcut keys)
i= Index (go to mainIndex of this series)
n= Next (go to Next serie in this show)
p= Previous (go to Previous serie in this show)
s= Switch (Toggle) between All-Thumbnails-View and One-Photo-View (of this set of photos)
1= choose 1st language
2= choose 2nd language
l or left arrow= (left) previous photo
r or right arrow= (right) next photo



2012-May: Changes by KLW (Klaas Wijchman) in this version json_photo_gal2s:

New Features

For the new features I created the following names:


Summary of valid names:

Per 'show' of photos:

NameDefinitionExample
"folderName"Name of directory of this show"2010/usa-02-Rafting",
"galleryName"Not used in V 3s anymore. Now use galleryName1 and/or galleryName2
"galleryName1"Title of Gallery displayed on top of screen in language 1"Augustus 2010 - Onze USA vakantie: Rafting op de Colorado",
"galleryName2"Title of Gallery, displayed on top of screen in language 2"August 2010 - Our USA holiday: Rafting the Colorado",
"previousGallery"Name of JSON file of Previous Gallery"2010-usa-01",
"nextGallery"Name of JSON file of Next Gallery"2010-usa-03",
"mainGallery"Name of JSON file of the Main (starting) Gallery"index",
"columns"Number of columns to display in main thumbnail view"7",

Per photo:

NameDefinitionExample
"filename"filename of photo"06.jpg", or "//06.jpg", in this latter case the node is seen as remark, comment.
"title"Not used in V 3s anymore. Now use title1 and/or title2
"title1"Title of photo above picture in language 1"Fijn om te zwemmen, heerlijk temperatuurtje",
"title2"Title of photo above picture in language 2"Great swimming, lovely temperature",
"description"Not used in V 3s anymore. Now use description1 and/or description2
"description1"Extra info below picture in language 1"Af en toe mochten we ook in de Colorado river zwemmen.",
"description2"Extra info below picture in language 2"Once in a while we were allowed to swim in the Colorado river.",
"short"Short description for under thumbnail"Into the water !",
"longitude"Longitude value for GoogleMaps"109 45 06.73 W",
"latitude"Latitude value for GoogleMaps"38 26 57.76 N",
"copyright"Copyright message using a .gif file, below description."John",   (NB: Clicking on this should open the default email program)
"child"Indication for a child-show (start another show from here)."2010-part2a",
"sound"Soundclip to play with this photo."myBirthdaySong.mp3",
"hlink"A link to another URL."http://www.foto-webcam.eu/webcam/dobratsch/" or "diarium/diarium.htm",
"download"download a file."downloads/ebooks/Bob Dylan (LRX).epub" or "mySpecialSong.mp3",
"month" (*)Month of picture taken, below copyright.8,
"year" (*)Year of picture taken, together with month below copyright.2010,

originally in Philip J. Guo JSON Photo Gallery project.
(*) - I don't use it im my photo galleries, but programming still available, so still usable.

If you have questions, comments etc, please mail to: klw at mail.com

Thanks for looking at this info and at our photos !!