1 Correct answer
Not sure why you want to mix a 3rd party lightbox viewer with Bootstrap that already has a built-in modal window component. But you need to load jQuery library first above all other scripts.
<!--JQuery first, then popper then Bootstrap JS-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.2.1.js"></script>
And fix your code error in comments.
Showing results for http://satgraphics.com/oldFriends/lightGallery.html - Nu Html Checker
4
Replies
Below is a quick demo of Bootstrap's Modal + Carousel components = simple photo gallery. In this example, I'm using Bootstrap 4.2.1 but this will work with any Bootstrap 4 x. Simply change the Bootstrap scripts & CSS to match the version in your site folder.
<!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.2.1.css" rel="stylesheet">
<style>
/**Make footer hug screen bottom**/
body { height: 100vh; }
.flex-grow { flex: 1 0 auto; }
</style>
</head>
<body class="d-flex flex-column">
<div class="container flex-grow">
<div class="jumbotron">
<h1 class="p2">Bootstrap 4 Modal Gallery</h1>
<p>This demonstrates how to combine Bootstrap's modal and carousel compoenents to create a simple photo gallery.</p>
</div>
<hr>
<div class="row">
<div class="col-md-10 mx-auto">
<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>
</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>Placeholder images courtesy of placeimg.com</small>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container-fluid">
<div class="row">
<footer class="col py-4 bg-dark text-white-50">
© 2019 Your Website all rights reserved.
</footer>
</div>
</div>
<!--jQuery first, then popper then Bootstrap-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.2.1.js"></script>
</body>
</html>
AdChoices