This photo album in plain javascript allows you to display the contents of your photo folders as well as the metadata contained in each photo
Photos can be displayed as a blog or thumbnail mosaic.
Try it yourself - demo
Copy all the directories and files on your server location.
Then place one or more folders containing photos in the albums directory.
There is already a background image and a title configured by default.
To change the title and the background image, simply place a new image in the styles/images directory, then modify the following lines in index.html:
/** USERS SETTINGS */
// Title
const topTitle = 'MY TITLE';
// Background image
const bgImage = 'styles/images/MY_BACKGROUND_IMAGE.jpg'
The top right menu contains the following:
- a drop-down menu
to choose the album to display - a button to sort photos alphabetically
or by date 
- a button to reverse the order of photos
(A->Z or most recent to oldest) or 
(Z->A or oldest to most recent) - a button to switch the display mode
blog or 
mosaic - a search field
to manually select one or more tags
In this mode, each photo is displayed with the title, description and tags from the photo metadata.
In this mode, photos are displayed in mosaic thumbnails.
In each display mode, by clicking on ⓘ at the left bottom of each photo, you will display an information panel with photo metadata, such as:
- title and description
- tags and persons
- author, file name, date
- credit and rights
- equipment and model
- photo width x height, size, mimeType (jpeg, png, etc.)
- ISO, focal, aperture, speed
- location & map (OpenStreeMaps)
Metadata can be added or edited using tools such as Photoshop or exiftool.
Click on a photo to view it in its original format.
I used the awesome EXIF reading library exifr to read photo metadata.
As well as the very nice interface fancybox to display the photos in their original format.
Contributions are welcome. Suggestions, bug, etc.
The next step is to edit the XMP information online. If anyone knows how to save an xmp file to a photo, I'm really interested. THANKS.