Just a simple lightbox with Bootstrap that uses Animate.css for image animations, and imagesLoaded to preload images. No jQuery, lightbox script or additional CSS is needed, just some pure JavaScript. All styles and positioning of elements were implemented using pure Bootstrap classes.
Using the Bootstrap standard classes
The example is to show that you can build a quite functional lightbox without an additional lightbox plugin, using the Bootstrap standard classes and scripts.
Of course, you can still optimize it a lot and create your own CSS animations with a few simple steps, for example, to save the use of Animate.css.
Libraries I have used, with great thanks to the respective developers
Bootstrap 5 Framework
https://getbootstrap.com/ImagesLoaded
https://github.com/desandro/imagesloadedAnimate.css
https://animate.style/Picsum Photos
https://picsum.photos/
Your feedback is appreciated
If you like this Simple Bootstrap Lightbox, 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
My website
https://simon-koehler.com
Let's connect on GitHub
https://github.com/koehlersimon
Top comments (0)