Highlighted

Jquery LightGallery modals do not open...

Participant ,
Aug 07, 2019

Copy link to clipboard

Copied

Dreamweaver 19.2

MacBook Pro 10.14.6

"LightGallery using jQuery"

Bootstrap 4.1.1 Snippet by Siddharth Panchal

Problem: The expected modals do not open.

Example can be viewed at:

http://satgraphics.com/oldFriends/lightGallery.html

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create Slideshows in Dreamweaver

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Jquery LightGallery modals do not open...

Participant ,
Aug 07, 2019

Copy link to clipboard

Copied

Dreamweaver 19.2

MacBook Pro 10.14.6

"LightGallery using jQuery"

Bootstrap 4.1.1 Snippet by Siddharth Panchal

Problem: The expected modals do not open.

Example can be viewed at:

http://satgraphics.com/oldFriends/lightGallery.html

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

TOPICS
Create Slideshows in Dreamweaver

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 07, 2019 0
Adobe Community Professional ,
Aug 07, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0
Participant ,
Aug 07, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0
Adobe Community Professional ,
Aug 07, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 1
Participant ,
Aug 07, 2019

Copy link to clipboard

Copied

That's extremely helpful.

Again, Thanks...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 07, 2019 0