Skip to main content
This topic has been closed for replies.
Correct answer Nancy OShea

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

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
August 7, 2019

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

Nancy O'Shea— Product User & Community Expert
S
SATTERWHITE ARTAuthor
Known Participant
August 7, 2019

Nancy,

I haven't done any work in coding for  couple of years, and just started again in hobby mode. I'm at the age where although I enjoy it more than crosswords, but do not keep up with the fast pace of change as well as in the past.

I'll take another look at the Dreamweaver componants and research a bit more on keeping it to Bootstrap.

Appreciate your time and patience.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 7, 2019

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">&times;</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">
&copy; 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>
Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices