bootstrap-lightbox-gallery
Version:
A nice lightbox gallery component for Bootstrap 5
88 lines (86 loc) • 4.68 kB
HTML
<!--suppress HtmlFormInputWithoutLabel -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-lightbox-gallery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" 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://shaack.com/projekte/dummy-placeholder-images/dummy_4_3.jpg" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://shaack.com/projekte/dummy-placeholder-images/dummy_4_3.jpg" 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://shaack.com/projekte/dummy-placeholder-images/dummy_3_4.jpg" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://shaack.com/projekte/dummy-placeholder-images/dummy_3_4.jpg" 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://shaack.com/projekte/dummy-placeholder-images/dummy_1_1.jpg" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://shaack.com/projekte/dummy-placeholder-images/dummy_1_1.jpg" 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://shaack.com/projekte/dummy-placeholder-images/dummy_16_9.jpg" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://shaack.com/projekte/dummy-placeholder-images/dummy_16_9.jpg"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://shaack.com/projekte/dummy-placeholder-images/dummy_3_1.jpg" data-gallery="gallery-1" class="d-block">
<figure>
<img src="https://shaack.com/projekte/dummy-placeholder-images/dummy_3_1.jpg" 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.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" 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>