This beautiful gallery combines the Bootstrap framework with Masonry, Animate.css and random photos from Unsplash.
I needed an example for a client, where after each call to the gallery, a certain number of random images are loaded, and also the image sizes are determined randomly.
What could be more obvious than tapping into an image database, I thought. While researching, I came across picsum.photos and their API.
But first, here's the working example:
What happens under the hood?
- Load list with images in JSON format
- Preload images with ImagesLoaded, then hide preloader
- Dynamically generate Bootstrap HTML with JavaScript
- Set CSS classes for Animate.css with delay on each image
- Put everything in a cool shape with Masonry
Pure Vanilla
No JavaScript library is used for the gallery. Everything is 100% JavaScript. For me personally, jQuery has had its day anyway.
No additional CSS so far...
So far, no additional CSS has been used, except for a few small inline styles to control the animations. Imagine what you can do with this gallery and some extra CSS! You could make it look really cool, and add a lightbox if you want.
Libraries I have used, with great thanks to the respective developers
Bootstrap 5 Framework
ImagesLoaded
https://github.com/desandro/imagesloaded
Masonry
Animate.css
Picsum Photos
Your feedback is appreciated
If you like this Bootstrap Masonry Gallery PEN, feel free to leave your feedback. Also, I'm always very happy when others can use my work as the basis for great projects.
What would you improve, add, or do differently?
More Stuff
Sign up for my Newsletter!
https://simonkoehler.com/newsletter
PHP Developer
https://simonkoehler.com/php-developer
Top comments (0)