You don't need any extra CSS or JS code if you already use Bootstrap.
The code below will do what you want. Simply replace the thumbnails and full size images with your own.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Modal Gallery</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">
</head>
<body class="container">
<div class="jumbotron-fluid">
<h1 class="p2">Bootstrap 4 Modal Gallery</h1>
<p>This demonstrates how to combine the modal and carousel compoenents to create a simple photo gallery.</p></div>
<div class="row">
<ul class="list-inline text-center">
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img alt="description" class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br>
Caption</a></li>
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img alt="description" class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br>
Caption</a></li>
<li class="list-inline-item" data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img alt="description" class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br>
Caption</a></li>
<!--end of thumbnails-->
</ul>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">My Awesome Gallery</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<!--INSERT CAROUSEL & FULL SIZE IMAGES HERE-->
<div id="myGallery"
class="carousel slide bg-dark" data-ride="carousel" data-interval="false" >
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/1" alt="First slide">
<div class="carousel-caption">
<h5>First slide Heading</h5>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/2" alt="Second slide">
<div class="carousel-caption">
<h5>Second slide Heading</h5>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="https://placeimg.com/600/400/nature/3" alt="Third slide">
<div class="carousel-caption">
<h5>Third slide Heading</h5>
<p>Third slide Caption</p>
</div>
</div>
</div>
<!--Previous & Next arrows-->
<a class="carousel-control-prev" href="#myGallery" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myGallery" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<small>Images courtesy of placeimg.com</small>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="text-center col-lg-6 offset-lg-3">
<h4>Footer </h4>
<p class="small"> © 2019 · All Rights Reserved · XYZ Website</p>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>
3
After lots of searching, I gather that what I want to do is now called "modals." But I can't find any one, straight-forward answer on how to do this; they're all different. Can anyone suggest a simple way to do this without the trial and error of adding a bunch of code that may or may not work?
AdChoices