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 January 2019:
Remember, this photo-show program should preferably be used on 'normal' screens, so the behaviour on Tablets and Smartphones might not be ideal, but at least you can see the photos and videos !!
- When you resized the browser-window, photos and videos were not resized. Changed this, so if the window is resized, the photos and videos are resized as well (up to their own max. size)
This change also means that on small screens (Smartphones etc.) the photos and videos are resized to fit the screen (at least it did on the few devices I could test this).
Works on the major browsers, but unfortunatly for photos on Internet Explorer only as from V. 16. For photos, other versions don't keep the aspect-ratio correct, but for videos they do !
Changes in November 2018:
- Changed the normal, slow appearing, little helptexts that you get when hovering over an element, into quick-responsive, better readable, small text-popups.
- Created keyboard-shortcut 'Q' to Quiet said popups (in the current show) for when you don't want to see them constantly. It's a toggle, so clicking Q again, makes them visible again.
- Added above info to the Help-screen.
- In the Sitemap the current show is now clearly visible, as well as the path you took through the shows.
- Added keyboard shortcuts for almost all thumbnails. They show up as blue-grayish letters at the lower-right corner of each thumbnail. Only if there are many thumbnails on one screen, the last thumbnails cannot directly be accessed using the keyboard.
Changes in October 2018:
- Created keyboard-shortcut 'F' to Force the Foto to Fit in the availabe screensize. Esc, F or click on image to return to normal view.
- Added this info to the Help-screen.
- Made a display of the number of child sub-shows that a photo-show contains.
Changes in June 2018:
- Some changes in the display of text (see Feb-March 2018). In some cases it behaved a bit buggy, solved that.
- Made the Help text a lot more easier to read (using said text display feature).
- Added keyboard 'C' to open a child sub-show, for when the large photo has a blue border. Click on it will of course, as previously, open this child sub-show as well.
- Added this info to the Help-screen.
Changes in April 2018:
- Introduced the 'video' tag to make it possible to show a video instead of a picture.
Needed this for a small video we made during the eclipse of 2017 in the USA.
Open video with keyboard 'V' or click on image (only if the large photo has a turquoise border).
- Added this info to the Help-screen.
- Some more finetuning to fit images into the window when they are 'too' large. With keyboard 'o' or click on image, you can increase to original size and decrease to get back to fitting size.
Changes in Feb-March 2018:
- Made it possible to show text instead of a picture or together with a picture
Hover over the thumbnail (icon) and the text will show up.
Best example is the 'Latest News' icon on the main-screen.
Changes in November 2017:
- Added a Sitemap, plus button to show it (or open completely or hide, it's a toggle).
The sitemap itself is a stand-alone html file which is included (using a short script I found in the 'https://www.w3schools.com/lib/w3.js' library to do this) into the main index.html file.
First created a REXX program, which recursively looped through all the json files of the site to create the sitemap.html file.
After some testing and fine-tuning it worked as expected in FireFox, Chrome and Android but then I found out that Internet Explorer does not support 'wedges', but luckily I found this solution made by Tyler Uebele (could not find his email to thank him.)
Changes in April 2017:
- 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.
- 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:
- Introduced a download node for the json files, so that one can download a file, example: "download": "downloads/ebooks/Bob Dylan (LRX).epub".
- 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.
- 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:
- A bit more calculation to decrease image size (see point 3 below) to also decrease when height is too large.
- Started working on concert pictures (and wanted some music to accompany), so changed the already available sound-part completely.
- Introduced non-documented :-) 'd' shortcut to see the image-size for the displayed picture.
- 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:
List of new features and changes:
- 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'.
- Introduced a hlink node for the json files, to link to something, example: "hlink": "http://www.foto-webcam.eu/webcam/dobratsch/".
- Lately I uploaded larger size pictures. They are now downsized to fit into the browser-window.
- 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.
- 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 !!
- Managed to correct the sending of emails when clicking on the copyright info (under the picture) (or keyboard 'w').
- Added info to the 'm', 'o' and 'w' shortcut keys to the Help-info.
- Version date of each individual json file (= subshow) now displayed at the very bottom of that subshow.
- 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.
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).
- 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.
- 2014-March: Took away left-arrow on first foto and right-arrow on last one.
- 2014-February: You now see- and can click on, the thumbnails of the previous and next show.
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 !!
This last sentence implies 2 things:
- If and only if the json file only contains entries with nodes with a 'child' tag, then the tag 'filename' does not need to have the value of an existing picture, the value can be anything, so it can be used e.g. for some meta-documentation purpose.
The tag as such need to be present, otherwise the complete node (array-entry) is skipped.
- If and only if the json file only contains entries with nodes with a 'child' tag, then the tag 'folderName' is not really needed (but may be present).
- 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).
@1. A few changes were necessary in the JSON files:
- Possibility for two languages in the JSON files and to switch between them.
- Added some useful keyboard shortcut keys (especially useful on SmartPhones that have a keyboard).
"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 !
- The galleryName (at the top of the screen)
- The title (just above each individual photo)
- The description (just below each individual photo)
Please see also the tables at the bottom of this window to see all possible tags !
@2. I added the following keyboard shortcuts:
|a||= Switch from one-photo-view to All-thumbnails-view and the other way around (of this set of photos).|
|h or F1||= Help (lists the various shortcut keys).|
|i||= Index (go to mainIndex of this series).|
|m||= Map (show location of picture on GoogleMaps, only if photo has yellow border).|
|n||= Next (go to Next serie in this show).|
|o||= Original-toggle (by default, photos are made to fit within the browser window. Clicking on key 'o' or somewhere in the middle of the picture, it toggles to original size and vice versa. Quite useful for panoramas).|
|p||= Previous (go to Previous serie in this show).|
|s||= Switch (Toggle) between showing the Sitemap of the Wijchman website and hiding it.|
|w||= If there is a copyright message below a photo, the program tries to open the default mail program to send an email to that person.|
|Esc||= Switch from One-Photo-View to All-Thumbnails-View (same as a, but one-way only). It also kills the audio or video, if one was playing.|
|Enter||= If main-screen shows a number of thumbnails, 'open' the one in the upper-left, so open a subshow or show picture or the like (it does what a mouse-click would do).|
|1||= choose 1st language|
|2||= choose 2nd language|
|l or left arrow||= (left) previous photo|
|r or right arrow||= (right) next photo|
|Swiping left or||right on Tablets, Mobiles etc. should also work.|
2012-May: Changes by KLW (Klaas Wijchman) in this version json_photo_gal2s:
For the new features I created the following names:
For the general part of the JSON file:
General name to be able to use various number of columns in startup thumbnails-screen.
Value must be > 1, didn't test maximum :-)
Defaults to 5 (as is standard in Philip Guo's program) when no columns name is defined.
Added 4 buttons:
Previous: View Previous Set of Slides. Button is now the Thumbnail picture of the previous show.
Main Index: View the Main (first) Screen (useful when the start of
the show has some child-galleries)
Show All: View All Thumbnails of this Set of Slides. (NB. This
actually toggles between single view and thumbnails).
Next: View Next Set of Slides. Button is now the Thumbnail picture of the next show.
For this to work, I added following entries to the main-names of the .json file:
To show a short description under the thumbnails in the main thumbnail panel.
It is also used as a popup (tooltip) when hovering over a thumbnail in the slider and on the larger photo.
"short": "Small side-canyon"
Creates the possibility to use a thumbnail to start a new gallery, can often be
as a kind of menu to select from various galleries, or in a gallery, to go to a 'child'-gallery.
Thumbnails with a child-show have a lightblue border and a lightblue short text below the thumbnail (in the main-thumbnail-screen).
Needed names when child is used: <filename>, <child>
NB. the .json file of course must exist in the json-files directory !!
latitude and longitude
Creates the possibility to view the position where the photo was taken in
GoogleMaps. The 2 values are displayed above the picture, on each side of the photo-counter.
When clicked on the larger picture itself, it opens up a new window and shows the position in Google Maps.
Images with coordinates have a yellow border and a yellow short text below the thumbnail (in the main-thumbnail-screen).
"longitude": "110 22 37.09 W",
"latitude": "37 53 39.62 N"
This paragraph about orientation is not relevant anymore, because using some clever calculation this tag is not needed anymore !
Deleted various issues about width and height.
The photos on my webside normally have a width of 800, so no need for all the
Therefore no width and height
in my json files, instead values of 800- and 600px are programmed in, however, rest of size-programming is still in, but this is mainly for displaying the thumbnails.
I have some very wide panorama photos on which I don't want any resizing.
To be able to distinguish between landscape and portrait mode, I added this name.
Now we know it is portrait (only first char 'P' is tested, both upper- and lowercase valid).
Default (when no (or wrong) "orientation" is defined) is landscape.
Each photo can have its own sound.
Not really created to give each photo its own music (but possible), but more generally to once in a while add some sound.
I personally have some spoken words by my son and daughter (when they were young...) which I added.
Images with a sound have a green border and a green short text below the thumbnail (in the main-thumbnail-screen).
This file has to reside in the same gallery directory as the pictures (thus in the 'foldername').
Used to link to another URL
When I started to use the json-photo-gal as my main website engine, I not only needed to display photos, but also to link to other (internal and external) sites.
Images with a hyperlink have a red-ish border (sorry that that is hard to read, but on the website itself the border is very good visible) and a white short text below the thumbnail (in the main-thumbnail-screen).
The link will be opened in a new window-tab.
Summary of valid names:
Per 'show' of photos:
|"folderName"||Name of directory of this show||"2010/usa-02-Rafting",
NOT needed (but no harm if present) when the json file only contains nodes with a 'child' tag.
"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",
|"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",
|"video"||Videoclip to play (only tested with mp4).||"usa-2017/eclipse.mp4",
|"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 !!