Skip to content

Instantly share code, notes, and snippets.

@pverhaert

pverhaert/index.html

Last active April 22, 2024 12:27
Show Gist options
  • Save pverhaert/1817bfac6311eae6e12de18cc2ca1209 to your computer and use it in GitHub Desktop.
Save pverhaert/1817bfac6311eae6e12de18cc2ca1209 to your computer and use it in GitHub Desktop.
Download ZIP
Photo Gallery (with Bootstrap 5.3 and JavaScript)
Raw
index.html
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<!--
Exercise: Photo Gallery
- Get 9 random photos from https://picsum.photos/ and display them in a gallery.
- Use the following URL to get a random photo: https://picsum.photos/500/350.jpg?random_number
(the random number is used to get a new photo each time)
- When a user clicks on a photo, a modal should open with the photo and a caption.
- OPTIONAL: add some CSS to place the caption in the top right corner of the photo.
-->
<div class="container my-5">
<div class="row">
<div class="col-12">
<h1 class="text-center mb-4">Photo Gallery</h1>
<hr>
<div class="row row-cols-1 row-cols-md-3 g-4" id="gallery">
<!-- Photos will be added here -->
</div>
</div>
</div>
</div>
<div class="modal" id="photoModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<figure>
<img src="https://picsum.photos/id/1/500/350.jpg" alt="Photo" class="img-fluid">
<figcaption class="fw-bold">Photo caption</figcaption>
</figure>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment