A front-end-only approach to creating quick photo albums, powered by Cloudinary for image management, organisation, manipulation, optimisation and delivery.
Live example : https://quickphotos.page/
^^ Try searching for: cars, sunsets or motorbikes
- The page initially loads a placeholder tags and content
- Querystring parameter for 'album' drives the page logic
- A /list API request is made to Cloudinary based on the 'album' value
- JSON response is returned, and parsed to manipulate the DOM accordingly, including image requests
- Images are subsequently requested from Cloudinary
- Album details are managed via a seperate .json file {album}-album-details.json
- Additionally a light box also enables images to be seen bigger, including fullscreen, and also a slideshow
- Alt text can also be managed via asset contextual metadata
- Also including multi-lingual alt-tags
++++++++++++++++++++++++++++
To use with your own account, make 1 change :
live.html
62: const cloud_name = 'quickalbum';
^^ Change this to your Cloudinary cloudname ^^
and ensure you have list API enabled
++++++++++++++++++++++++++++
** Notes **
- Cloudinary provides generous free accounts which could be sufficient to power many projects, but if your storage, bandwidth or transforms exceed the available free credits, there are likely to be costs in utilising the service further
- /list API is NOT enabled by default on Cloudinary accounts
Javascript lightbox gallery from: https://sachinchoolur.github.io/lightgallery.js/ // for commercial usage, please see their license details
Some demo example media via: https://unsplash.com/