forked from bakedbird/mauGallery
Bootstrap 5 Gallery, vanilla JS.
- Removed JQuery (+ updated to Bootstrap 5.2.3)
- Complete keyboard navigation
- Swipable gallery modal on tablet/mobile
- Enhanced mobiles compatibility
- Pictures HTMLDom compatible (and also responsive images compatible)
- Configurable CSS
- Intelligent modal sizing
- Intelligent scroll on modal quit
- Some minor pagespeed optimizations (dynamic modal images lazyloading)
- Multiple galleries on a single page
- Loading/disabled JS environment placeholders
<script src="./assets/maugalleryLauncher.js" async></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="./assets/maugallery.js" defer></script>https://gustavewpm.github.io/enhanced-mauGallery/
Pagespeed Insights may sometimes indicate a high CLS on the demo page of this project.
When the JavaScript code executes quickly enough, this does not occur. However, due to the unpredictable nature of web environments, the code might not execute fast enough, causing CLS to spike.
This happens because the placeholders used in this project do not have heights matching those of gallery elements once they are loaded. In this case, Pagespeed Insights detects the replacement of these placeholders by gallery elements, leading to a significant CLS increase.
It is up to you to consider this point and adjust your placeholders so that this CLS issue does not occur, regardless of how quickly the JavaScript code is executed.
A simple images gallery made with jQuery and bootstrap4