![\"\"](\"https:\/\/metrix-x.rraz.ca\/wp-content\/uploads\/kodachrome-magnifier-800x389.png\")
\nby Ryan Raz<\/p>\n
\nby Ryan Raz<\/p>\n
1. What Light Table is
\nHigh Resolution image light table and slide show.<\/p>\n
See it running: My 1970s in Kodachrome 64 slides\u2014 https:\/\/rraz.ca\/kodachrome\/light-table\/<\/a>. That gallery is shown as a live example of the light table; it is not part of the package. The package can be found here: https:\/\/github.com\/RRaz\/Light-Table<\/a><\/p>\n 2. What it does The magnifier is open at 2\u00d7 in this capture: the lens follows the pointer across the photograph, and the buttons beside it switch to 4\u00d7 and 8\u00d7. The thumbnail strip along the bottom is where photographs are chosen for the slide show.<\/p>\n My 1970s in Kodachrome<\/p>\n 4. What you receive colours\/ 5. Installing The address is:<\/p>\n https:\/\/yoursite.com\/\/light-table\/ https:\/\/yoursite.com\/colours\/light-table\/ If your website accepts file uploads \u2014 FTP, a control panel File Manager, or the upload in your host’s dashboard \u2014 use the structure above exactly as it is.<\/p>\n If your site is built with a page builder Put the folder somewhere that serves files. A spare folder on your hosting, a subdomain, or any host that only has to serve files will do. It does not need a database, PHP, Node or a build step, and it does not need developer tools or accounts. https:\/\/your-static-host.example\/colours\/light-table\/?gallery=\/colours Check it: open the address above. If the colour slides appear, it is installed.<\/p>\n 6. Opening it 7. Changing the gallery the images, in the inner folder \u2014 colours\/colours\/ in the sample { The comma rule. Braces hold one photo. A comma separates it from the next one, and the last photo has no comma after it. That is the single thing that breaks a list.<\/p>\n When you move a photo to a different place, take the whole block – from its { to its }, – not a line at a time. After moving:<\/p>\n every block except the last ends with }, Part What it does The look of the light table – colours, sizes, buttons – is not in this file. It lives in the light-table\/ folder and is not edited by hand.<\/p>\n If the page then says Unable to load gallery, the list is the first thing to check: a missing or doubled comma is almost always the cause.<\/p>\n 7.1 Titles come from the file name If a title was set by hand in gallery.json, the file name must still match url. Renaming the file breaks that link: the next rebuild drops the entry, adds a new one for the new name, and captions it with that name. A title set by hand does not survive a rename.<\/p>\n 7.2 Order By rebuilding: number the files 01-, 02-, 03- and rebuild. Sorting is natural, so 2- comes before 10-. 7.3 Adding a photo 7.5 More than one gallery 8. Updating a live gallery 9. Versions and rollback light-table-colours-v2026-10-28.zip by Ryan Raz 1. What Light Table is High Resolution image light table and slide show. See it running: My 1970s in Kodachrome 64 slides\u2014 https:\/\/rraz.ca\/kodachrome\/light-table\/. That gallery is shown as a live example of the light table; it is not part of the package. The package can be found here: https:\/\/github.com\/RRaz\/Light-Table 2. What it […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-455","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/posts\/455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=455"}],"version-history":[{"count":2,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/posts\/455\/revisions"}],"predecessor-version":[{"id":458,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=\/wp\/v2\/posts\/455\/revisions\/458"}],"wp:attachment":[{"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/metrix-x.rraz.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nFully featured, including a magnifying loupe and the thumbnail strip.
\nIn slide show mode the image expands to take up the whole screen, apart from the controls.
\nSelf-contained, so installation is not restricted by the host: any web server that can serve files will run it, and the folder you upload holds the page, its files and the photographs. There is no database, no PHP, Node or Python on the server, and no setup program.
\nYour photographs stay yours. Building a gallery and viewing it send no photograph to any cloud service. Everything happens on your own host, under your own account.
\n3. The light table in use
\nMy 1970s in Kodachrome, shown with the magnifier open at 2x<\/p>\n
\nOne zip containing a single folder, named after the gallery. It includes a sample gallery of eight colour slides, so the light table can be checked before your own photographs are added:<\/p>\n
\nlight-table\/
\nindex.html
\nassets\/
\ncolours\/
\ngallery.json
\n01-red.png
\n02-orange.png
\n…
\n08-violet.png
\nlight-table\/ is the app. It is the same in every gallery and is not edited.
\nthe inner folder, with the same name, holds the images and gallery.json \u2014 the list that says which photographs appear, in what order, with what captions. The sample colour slides are replaced by your photographs.
\nnothing else is required: no database, no server code, no installer.
\nThe two folders must keep those names and that relationship. light-table\/ looks for the gallery beside it.<\/p>\n
\nPut the whole container folder on your website, unchanged. That is the whole install: the folder is the light table.<\/p>\n
\nwith replaced by the folder name. The sample folder is colours, so its address is:<\/p>\n
\nThe folder name is also the heading above the photos; hyphens become spaces, so lake-simcoe is shown as Lake Simcoe. The folder can sit at the top level or in a subfolder \u2014 only the address changes.<\/p>\n
\nA page builder usually will not let you upload index.html and assets\/, so the folder cannot live there. The gallery still works, in two steps:<\/p>\n
\nOn the page, add the light table address with the builder’s Embed or HTML block. The light table then opens inside your page.
\nFor that second step use the explicit form of the address, so the light table knows which gallery to load:<\/p>\n
\nYou may want to keep each build as a dated zip (section 9), so the gallery can be replaced or rolled back without rebuilding it.<\/p>\n
\nhttps:\/\/yoursite.com\/colours\/light-table\/
\nhttps:\/\/yoursite.com\/colours\/light-table\/?gallery=\/colours
\nBoth open the same gallery. The ?gallery= form is the explicit one and is the safer choice when the light table is embedded in another page or loaded from a different folder; without it the light table works out the gallery from its own address. The live example in section 1 uses the short form.<\/p>\n
\nThere are two routes: send the folder back to be rebuilt, or edit it on the server without any tools. Both touch the same two things:<\/p>\n
\nthe list, gallery.json, beside them
\nThe whole file looks like this, with two photos in it:<\/p>\n
\n“updated”: “2026-10-29T23:12:05.766Z”,
\n“photos”: [
\n{
\n“id”: “01-first-photo”,
\n“url”: “.\/01-first-photo.jpg”,
\n“title”: “First photo”
\n},
\n{
\n“id”: “02-second-photo”,
\n“url”: “.\/02-second-photo.jpg”,
\n“title”: “Second photo”
\n}
\n]
\n}
\nLeave the outer braces, the “photos”: line and the two square brackets in place. The photo blocks go between the square brackets.<\/p>\n
\nthe last block ends with }
\nno block ends with two commas, and none is missing one
\nWhat you can change in the list:<\/p>\n
\ntitle the caption under the photo
\nurl which image file the entry shows: the file name with .\/ in front
\nid the entry’s own name; no two entries may share one
\nthe order of the blocks the order the photos appear in
\nadding or removing a block adding or removing a photo from the gallery
\nupdated records when the list was last written. The build sets it on every rebuild, and the light table does not read it, so it can be left alone.<\/p>\n
\nOne way to change a caption is to rename the file. 01-dawn.jpg becomes 01 dawn; rename it to Dawn over the lake.jpg and the caption becomes Dawn over the lake. Spaces, capitals and punctuation in the file name are kept as typed.<\/p>\n
\nThe order of the blocks in gallery.json is the order shown, so there are two ways to arrange a gallery:<\/p>\n
\nBy hand: move the blocks in gallery.json into the order you want. The file names do not matter for this.
\nOne trap: renaming a single file makes it a new entry, and a rebuild appends new entries at the end. Rename all of them, or fix the order by hand afterwards.<\/p>\n
\nRebuilding: drop the file into the image folder and rebuild. It is added at the end, then can be moved.
\nBy hand: copy the last block in gallery.json, change id, url and title to the new file, and move the block to where it should appear. Upload the image as well.
\n7.4 Deleting a photo
\nDelete its block from gallery.json and delete the image. Do both: an entry pointing at a missing file shows a broken photo, and an image with no entry never appears.<\/p>\n
\nEach gallery is a self-contained folder with its own light-table\/. They are updated independently, and one gallery can be replaced without touching another.<\/p>\n
\nKeep a copy of the current folder before changing anything.
\nReplace the images and gallery.json (or replace the whole folder).
\nOpen the page and hard-refresh (Ctrl+F5). Browsers cache gallery.json, so an old list can survive a normal reload.
\nIf an image still shows the old version, its file name is the cache key – renaming the file forces the new one to load.
\nGalleries published before the folder was renamed keep their old address: a small forwarding page is left behind, so links already in the wild still arrive at the gallery.<\/p>\n
\nName each build with a date, for example:<\/p>\n
\nKeep the current zip and the one before it.
\nTo roll back: delete the gallery folder on the server, upload the previous zip and extract it.
\nKeep zips out of the public web root, or delete them after extracting. A zip sitting on the server can be downloaded by anyone who guesses the name, and it contains the whole gallery.
\n10. If something is wrong
\nWhat you see What it usually means
\n“Unable to load gallery” gallery.json is not where the light table expects it; check the two folder names
\n“Unable to load gallery” after editing the list a comma is missing, doubled, or left after the last block
\nA blank frame assets\/ was not uploaded beside index.html
\nSome photos missing They are not listed in gallery.json, or the file name case differs from the entry
\nAn old photo, or an old title Browser cache \u2014 hard-refresh, or rename the file
\nWorks on your computer, not online Paths are relative; check that the inner folder was uploaded too
\n11. Notes for maintaining gallery
\nCheck how the site is updated before promising anything. FTP, a control panel, or a page builder that cannot host files at all \u2014 section 5 covers what to look for.
\nDecide who rebuilds after new photos. If the person who built the gallery does it, sections 7.2 to 7.4 shrink to “send the folder back”, and the recipient never edits gallery.json.
\nOne folder per gallery. It keeps them apart, so one can be replaced without touching the others; the cost is that a light table fix is uploaded once per gallery.<\/p>\n","protected":false},"excerpt":{"rendered":"