bootstrap-lightbox-gallery
Version:
A nice lightbox gallery component for Bootstrap 5
92 lines (90 loc) • 4.34 kB
HTML
<!--suppress HtmlFormInputWithoutLabel -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-lightbox-gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="importmap">
{
"imports": {
"cm-web-modules/": "./node_modules/cm-web-modules/",
"bootstrap-show-modal/": "./node_modules/bootstrap-show-modal/"
}
}
</script>
</head>
<body>
<section class="container py-5">
<h1>bootstrap-lightbox-gallery</h1>
<p><i>A simple lightbox gallery with Bootstrap 5</i></p>
<p>Repository: <a href="https://github.com/shaack/bootstrap-lightbox-gallery">https://github.com/shaack/bootstrap-lightbox-gallery</a></p>
<div class="row g-3">
<div class="col-sm-6 col-md-4">
<a href="https://placehold.co/1024x768" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://placehold.co/1024x768" class="img-fluid" alt="Lorem ipsum dolor sit amet"/>
<figcaption class="visually-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</figcaption>
</figure>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="https://placehold.co/768x1024" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://placehold.co/768x1024" class="img-fluid" alt="Quick brown fox jumps">
<figcaption class="visually-hidden">
Quick brown fox jumps over the lazy dog. All their equipment and instruments are alive.
</figcaption>
</figure>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="https://placehold.co/1024x1024" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://placehold.co/1024x1024" class="img-fluid" alt="Far far away">
<figcaption class="visually-hidden">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
</figcaption>
</figure>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="https://placehold.co/800x800" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://placehold.co/800x800" class="img-fluid" alt="The European languages">
<figcaption class="visually-hidden">
The European languages are members of the same family. Their separate existence is a myth.
</figcaption>
</figure>
</a>
</div>
<div class="col-sm-6 col-md-8">
<a href="https://placehold.co/1600x900" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://placehold.co/1600x900" class="img-fluid" alt="The sky was cloudless">
<figcaption class="visually-hidden">
The sky was cloudless and of a deep dark blue. The spectacle before us was indeed sublime. All human things are subject to decay.
</figcaption>
</figure>
</a>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.3/dist/es-module-shims.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script type="module">
import {LightboxGallery} from "./src/LightboxGallery.js"
new LightboxGallery(document.querySelectorAll("[data-gallery='gallery-1']"),
{
title: "Gallery 1",
theme: "dark"
})
</script>
</body>
</html>