• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Jquery LightGallery modals do not open...

Participant ,
Aug 07, 2019 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

Views

2.0K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 07, 2019 Aug 07, 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

Votes

Translate

Translate
Community Expert ,
Aug 07, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Aug 07, 2019 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.

Votes

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
community guidelines
Community Expert ,
Aug 07, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Aug 07, 2019 Aug 07, 2019

Copy link to clipboard

Copied

LATEST

That's extremely helpful.

Again, Thanks...

Votes

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
community guidelines